/**
 * Achievement System CSS (#30) — PRO Visual Redesign
 *
 * Hexagonal badge frames with rarity-driven visual hierarchy.
 * Uses NE design system tokens (--ne-*).
 *
 * Sections:
 *   1. Module tokens
 *   2. Hexagonal badge component (.ne-badge-hex)
 *   3. Achievement cards (profile + catalog)
 *   4. Profile showcase
 *   5. Achievement grid
 *   6. Inline badges (tables/rankings)
 *   7. Toast notifications
 *   8. Catalog extras
 *   9. Admin rarity pills
 *  10. Animations
 *  11. Responsive
 */

/* ═══════════════════════════════════════════
   1. Module tokens
   ═══════════════════════════════════════════ */

:root {
	--ne-epic: #a855f7;
	--ne-rare-blue: #4a9eff;
	--ne-legendary-gold: #FFB800;
	--ne-hex-border: 2px;
	--ne-hex-ratio: 1.1547;

	/* Neumorphism tokens (dark theme) */
	--ne-neu-light: rgba(255, 255, 255, 0.04);
	--ne-neu-dark: rgba(0, 0, 0, 0.45);
	--ne-neu-inset-light: rgba(255, 255, 255, 0.03);
	--ne-neu-inset-dark: rgba(0, 0, 0, 0.5);
}

@property --ne-hex-angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}


/* ═══════════════════════════════════════════
   2. Hexagonal badge component
   ═══════════════════════════════════════════ */

.ne-badge-hex {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}

.ne-badge-hex__inner {
	position: absolute;
	clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;

	/* Neumorphic convex surface — light from top-left, dark at bottom-right */
	background: linear-gradient(
		145deg,
		rgba(255, 255, 255, 0.07) 0%,
		var(--ne-surface) 40%,
		rgba(0, 0, 0, 0.12) 100%
	);
}

/* Icon content inside hex */
.ne-badge-hex__icon {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.ne-badge-hex__icon .ne-achievement-icon-emoji {
	line-height: 1;
}

.ne-badge-hex__icon .ne-achievement-icon-img {
	object-fit: contain;
}

.ne-badge-hex__icon i {
	line-height: 1;
}

/* ── Size variants ── */

/* sm: 24px inline badges for tables */
.ne-badge-hex--sm {
	width: 24px;
	height: 28px;
}

.ne-badge-hex--sm .ne-badge-hex__inner {
	inset: 1px;
}

.ne-badge-hex--sm .ne-badge-hex__icon {
	font-size: 0.65rem;
}

.ne-badge-hex--sm .ne-badge-hex__icon .ne-achievement-icon-img {
	width: 12px;
	height: 12px;
}

/* md: 56px for cards */
.ne-badge-hex--md {
	width: 56px;
	height: 65px;
}

.ne-badge-hex--md .ne-badge-hex__inner {
	inset: var(--ne-hex-border);
}

.ne-badge-hex--md .ne-badge-hex__icon {
	font-size: 1.4rem;
}

.ne-badge-hex--md .ne-badge-hex__icon .ne-achievement-icon-img {
	width: 28px;
	height: 28px;
}

/* lg: 72px for showcase */
.ne-badge-hex--lg {
	width: 72px;
	height: 83px;
}

.ne-badge-hex--lg .ne-badge-hex__inner {
	inset: 3px;
}

.ne-badge-hex--lg .ne-badge-hex__icon {
	font-size: 1.8rem;
}

.ne-badge-hex--lg .ne-badge-hex__icon .ne-achievement-icon-img {
	width: 36px;
	height: 36px;
}

/* ── Neumorphic depth on hex (md + lg only) ── */

.ne-badge-hex--md,
.ne-badge-hex--lg {
	filter: drop-shadow(3px 3px 5px var(--ne-neu-dark))
	        drop-shadow(-2px -2px 4px var(--ne-neu-light));
}

/* ── Rarity: Common (gray steel) ── */

.ne-badge-hex--common {
	background: linear-gradient(145deg, #555a70, #2d3040, #3d4155);
}

/* ── Rarity: Rare (blue metallic + glow) ── */

.ne-badge-hex--rare {
	background: linear-gradient(135deg, var(--ne-rare-blue), #1a5cb0, var(--ne-rare-blue));
}

.ne-badge-hex--rare:not(.ne-badge-hex--sm) {
	filter: drop-shadow(3px 3px 5px var(--ne-neu-dark))
	        drop-shadow(-2px -2px 4px var(--ne-neu-light))
	        drop-shadow(0 0 8px rgba(74, 158, 255, 0.25));
}

/* ── Rarity: Epic (purple + pulse glow) ── */

.ne-badge-hex--epic {
	background: linear-gradient(135deg, var(--ne-epic), #7c3aed, var(--ne-epic));
}

.ne-badge-hex--epic:not(.ne-badge-hex--sm) {
	animation: ne-hex-pulse-glow 2s ease-in-out infinite;
}

/* ── Rarity: Legendary (gold shimmer) ── */

.ne-badge-hex--legendary {
	background: conic-gradient(
		from var(--ne-hex-angle),
		var(--ne-legendary-gold),
		#FFD700,
		#FFA500,
		var(--ne-legendary-gold),
		#FFD700,
		var(--ne-legendary-gold)
	);
	animation: ne-hex-shimmer 3s linear infinite;
}

.ne-badge-hex--legendary:not(.ne-badge-hex--sm) {
	filter: drop-shadow(3px 3px 5px var(--ne-neu-dark))
	        drop-shadow(-2px -2px 4px var(--ne-neu-light))
	        drop-shadow(0 0 10px rgba(255, 184, 0, 0.4));
}

/* Fallback for browsers without @property support (static gold gradient) */
@supports not (syntax: '<angle>') {
	.ne-badge-hex--legendary {
		background: linear-gradient(135deg, var(--ne-legendary-gold), #FFD700, #FFA500, var(--ne-legendary-gold));
		animation: none;
	}
}

/* ── Locked state ── */

.ne-badge-hex--locked {
	background: linear-gradient(145deg, #1a1d2e, #252838, #1e2133) !important;
	animation: none !important;
	/* Concave neumorphism — pressed into the surface */
	filter: drop-shadow(1px 1px 2px var(--ne-neu-inset-dark))
	        drop-shadow(-1px -1px 2px var(--ne-neu-inset-light)) !important;
	box-shadow: none !important;
}

.ne-badge-hex--locked .ne-badge-hex__inner {
	/* Inverted gradient: dark at top-left, light at bottom-right (concave) */
	background: linear-gradient(
		145deg,
		rgba(0, 0, 0, 0.15) 0%,
		var(--ne-bg) 40%,
		rgba(255, 255, 255, 0.02) 100%
	);
}

.ne-badge-hex--locked .ne-badge-hex__icon {
	opacity: 0.25;
	filter: grayscale(1);
}

/* Lock overlay for locked badges (md and lg only) */
.ne-badge-hex--locked.ne-badge-hex--md::after,
.ne-badge-hex--locked.ne-badge-hex--lg::after {
	content: '\1F512';
	position: absolute;
	z-index: 2;
	font-size: 0.7rem;
	bottom: 8px;
	right: 4px;
	opacity: 0.6;
	filter: grayscale(1);
}

.ne-badge-hex--locked.ne-badge-hex--lg::after {
	font-size: 0.85rem;
	bottom: 10px;
	right: 6px;
}

/* ── Progress ring (SVG circle around hex) ── */

.ne-badge-hex-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ne-badge-hex-wrap__ring {
	position: absolute;
	inset: -4px;
	width: calc(100% + 8px);
	height: calc(100% + 8px);
	z-index: 0;
}

.ne-badge-hex-wrap__ring circle {
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
}

.ne-badge-hex-wrap__ring .ne-ring-bg {
	stroke: var(--ne-border);
}

.ne-badge-hex-wrap__ring .ne-ring-fill {
	stroke: var(--ne-text-muted);
	transition: stroke-dashoffset 0.5s ease;
}


/* ═══════════════════════════════════════════
   3. Achievement cards
   ═══════════════════════════════════════════ */

.ne-achievement-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--ne-space-4) var(--ne-space-3);
	border-radius: var(--ne-radius-md);
	gap: var(--ne-space-2);
	cursor: default;

	/* Neumorphic raised card */
	background: linear-gradient(
		145deg,
		rgba(255, 255, 255, 0.04) 0%,
		var(--ne-surface) 40%,
		rgba(0, 0, 0, 0.08) 100%
	);
	border: 1px solid var(--ne-border);
	box-shadow:
		5px 5px 10px var(--ne-neu-dark),
		-3px -3px 8px var(--ne-neu-light);
	transition: box-shadow var(--ne-duration) var(--ne-ease),
	            border-color var(--ne-duration) var(--ne-ease);
}

.ne-achievement-card:not(.ne-achievement-card--locked):hover {
	border-color: var(--ne-border-s);
	box-shadow:
		6px 6px 14px var(--ne-neu-dark),
		-4px -4px 10px var(--ne-neu-light);
}

.ne-achievement-card--locked {
	opacity: 0.55;
	/* Concave neumorphism — card appears recessed */
	background: linear-gradient(
		145deg,
		rgba(0, 0, 0, 0.06) 0%,
		var(--ne-surface) 40%,
		rgba(255, 255, 255, 0.02) 100%
	);
	box-shadow:
		inset 3px 3px 6px var(--ne-neu-inset-dark),
		inset -2px -2px 5px var(--ne-neu-inset-light);
}

.ne-achievement-card__badge {
	flex-shrink: 0;
}

.ne-achievement-card__name {
	font-weight: 600;
	font-size: 0.85rem;
	line-height: 1.3;
	margin-top: var(--ne-space-1);
}

.ne-achievement-card__date {
	font-family: var(--ne-font-mono);
	font-size: 0.65rem;
	color: var(--ne-text-subtle);
	margin-top: var(--ne-space-1);
}

.ne-achievement-card__meta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--ne-space-2);
	margin-top: var(--ne-space-1);
	font-size: 0.65rem;
}

.ne-achievement-card__earners {
	color: var(--ne-text-subtle);
}

/* Rarity card accents — neumorphic glow tint */
.ne-achievement--rare:not(.ne-achievement-card--locked) {
	border-color: rgba(74, 158, 255, 0.15);
	box-shadow:
		5px 5px 10px var(--ne-neu-dark),
		-3px -3px 8px var(--ne-neu-light),
		0 0 12px rgba(74, 158, 255, 0.06);
}

.ne-achievement--epic:not(.ne-achievement-card--locked) {
	border-color: rgba(168, 85, 247, 0.15);
	box-shadow:
		5px 5px 10px var(--ne-neu-dark),
		-3px -3px 8px var(--ne-neu-light),
		0 0 12px rgba(168, 85, 247, 0.06);
}

.ne-achievement--legendary:not(.ne-achievement-card--locked) {
	border-color: rgba(255, 184, 0, 0.15);
	box-shadow:
		5px 5px 10px var(--ne-neu-dark),
		-3px -3px 8px var(--ne-neu-light),
		0 0 14px rgba(255, 184, 0, 0.08);
}

/* ── Progress (compact, below badge) ── */

.ne-achievement-card__progress {
	margin-top: var(--ne-space-2);
	display: flex;
	align-items: center;
	gap: var(--ne-space-2);
	width: 100%;
	max-width: 120px;
}

.ne-achievement-card__progress-bar {
	flex: 1;
	height: 4px;
	border-radius: 2px;
	overflow: hidden;
	/* Neumorphic inset groove */
	background: rgba(0, 0, 0, 0.25);
	box-shadow:
		inset 1px 1px 2px rgba(0, 0, 0, 0.3),
		0 1px 0 rgba(255, 255, 255, 0.03);
}

.ne-achievement-card__progress-fill {
	height: 100%;
	border-radius: 2px;
	transition: width 0.3s;
	background: var(--ne-text-muted);
	/* Raised fill with subtle highlight */
	box-shadow: 0 0 4px rgba(255, 255, 255, 0.1);
}

/* Progress fill color by rarity */
.ne-achievement--rare .ne-achievement-card__progress-fill {
	background: var(--ne-rare-blue);
}

.ne-achievement--epic .ne-achievement-card__progress-fill {
	background: var(--ne-epic);
}

.ne-achievement--legendary .ne-achievement-card__progress-fill {
	background: var(--ne-legendary-gold);
}

.ne-achievement-card__progress-text {
	font-size: 0.65rem;
	color: var(--ne-text-subtle);
	white-space: nowrap;
	font-family: var(--ne-font-mono);
}


/* ═══════════════════════════════════════════
   4. Profile showcase (trophy shelf)
   ═══════════════════════════════════════════ */

/* Badges inline with profile name */
.ne-profile__name-row {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--ne-space-2);
	flex-wrap: wrap;
	text-align: left;
}

.ne-profile__name-row .ne-achievement-inline {
	margin-left: 0;
}


/* ═══════════════════════════════════════════
   5. Achievement grid
   ═══════════════════════════════════════════ */

.ne-achievements-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: var(--ne-space-3);
	margin-top: var(--ne-space-4);
}

/* Catalog variant: slightly wider cards */
.ne-achievements-grid--catalog {
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}


/* ═══════════════════════════════════════════
   6. Inline badges (tables/rankings)
   ═══════════════════════════════════════════ */

.ne-achievement-inline {
	display: inline-flex;
	align-items: center;
	margin-left: var(--ne-space-1);
	cursor: help;
	vertical-align: middle;
}


/* ═══════════════════════════════════════════
   7. Toast notifications
   ═══════════════════════════════════════════ */

.ne-toast-container {
	position: fixed;
	top: var(--ne-space-5);
	right: var(--ne-space-5);
	z-index: var(--ne-z-toast);
	display: flex;
	flex-direction: column;
	gap: var(--ne-space-3);
	pointer-events: none;
}

.ne-toast {
	display: flex;
	align-items: center;
	gap: var(--ne-space-4);
	padding: var(--ne-space-4) var(--ne-space-5);
	border: 1px solid var(--ne-border-s);
	border-radius: var(--ne-radius-lg);
	max-width: 380px;
	pointer-events: auto;
	overflow: hidden;
	animation: ne-toast-in 0.6s var(--ne-ease);

	/* Neumorphic elevated toast */
	background: linear-gradient(
		145deg,
		rgba(255, 255, 255, 0.05) 0%,
		var(--ne-elevated) 40%,
		rgba(0, 0, 0, 0.1) 100%
	);
	box-shadow:
		8px 8px 20px rgba(0, 0, 0, 0.5),
		-4px -4px 12px rgba(255, 255, 255, 0.03);
}

.ne-toast--dismiss {
	animation: ne-toast-out 0.5s ease-in forwards;
}

/* Rarity border accent on toasts */
.ne-toast--rare {
	border-color: rgba(74, 158, 255, 0.4);
}

.ne-toast--epic {
	border-color: rgba(168, 85, 247, 0.4);
}

.ne-toast--legendary {
	border-color: rgba(255, 184, 0, 0.5);
}

.ne-toast__badge {
	flex-shrink: 0;
	animation: ne-toast-badge-reveal 0.5s var(--ne-ease) 0.2s both;
}

.ne-toast__body {
	flex: 1;
	min-width: 0;
}

.ne-toast__title {
	font-family: var(--ne-font-mono);
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--ne-text-muted);
}

.ne-toast__name {
	font-weight: 600;
	font-size: 0.95rem;
	margin-top: 2px;
}

/* Rarity flash behind badge in toast */
.ne-toast__flash {
	position: absolute;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	left: var(--ne-space-4);
	top: 50%;
	transform: translateY(-50%) scale(0);
	opacity: 0;
	animation: ne-toast-flash 0.8s ease-out 0.1s forwards;
	pointer-events: none;
}

.ne-toast--common .ne-toast__flash { background: rgba(74, 79, 98, 0.3); }
.ne-toast--rare .ne-toast__flash { background: rgba(74, 158, 255, 0.2); }
.ne-toast--epic .ne-toast__flash { background: rgba(168, 85, 247, 0.2); }
.ne-toast--legendary .ne-toast__flash { background: rgba(255, 184, 0, 0.25); }


/* ═══════════════════════════════════════════
   8. Catalog extras
   ═══════════════════════════════════════════ */

.ne-hero__sub {
	font-size: 0.9rem;
	color: var(--ne-text-muted);
	margin-top: var(--ne-space-1);
}

/* Guest intro banner */
.ne-achievements-intro {
	padding-bottom: 0;
}

.ne-achievements-intro__card {
	display: flex;
	align-items: center;
	gap: var(--ne-space-6);
	padding: var(--ne-space-6);
	border-radius: var(--ne-radius-md);

	/* Neumorphic raised card with accent tint */
	background: linear-gradient(
		145deg,
		rgba(139, 127, 232, 0.06) 0%,
		var(--ne-surface) 40%,
		rgba(0, 0, 0, 0.08) 100%
	);
	border: 1px solid rgba(139, 127, 232, 0.12);
	box-shadow:
		6px 6px 14px var(--ne-neu-dark),
		-4px -4px 10px var(--ne-neu-light),
		0 0 20px rgba(139, 127, 232, 0.05);
}

.ne-achievements-intro__badges {
	display: flex;
	gap: var(--ne-space-3);
	flex-shrink: 0;
}

.ne-achievements-intro__body {
	flex: 1;
	min-width: 0;
}

.ne-achievements-intro__title {
	font-family: var(--ne-font-display);
	font-size: 1.5rem;
	letter-spacing: -0.5px;
	color: var(--ne-text);
	margin: 0 0 var(--ne-space-2) 0;
}

.ne-achievements-intro__text {
	font-size: 0.9rem;
	color: var(--ne-text-muted);
	line-height: 1.6;
	margin: 0 0 var(--ne-space-4) 0;
}

.ne-achievements-intro .ne-btn--accent {
	display: inline-flex;
	align-items: center;
	gap: var(--ne-space-2);
	padding: var(--ne-space-2) var(--ne-space-5);
	font-size: 0.85rem;
	font-weight: 600;
	border-radius: var(--ne-radius-pill);
	text-decoration: none;
	background: var(--ne-accent);
	color: #fff;
	border: none;
	cursor: pointer;
	transition: background var(--ne-duration) var(--ne-ease),
	            box-shadow var(--ne-duration) var(--ne-ease);
	box-shadow:
		3px 3px 8px var(--ne-neu-dark),
		-2px -2px 6px var(--ne-neu-light);
}

.ne-achievements-intro .ne-btn--accent:hover {
	background: var(--ne-accent-soft);
	box-shadow:
		4px 4px 12px var(--ne-neu-dark),
		-3px -3px 8px var(--ne-neu-light),
		0 0 12px rgba(139, 127, 232, 0.2);
}

@media (max-width: 768px) {
	.ne-achievements-intro__card {
		flex-direction: column;
		text-align: center;
		padding: var(--ne-space-5) var(--ne-space-4);
	}

	.ne-achievements-intro__badges {
		justify-content: center;
	}

	.ne-achievements-intro__title {
		font-size: 1.25rem;
	}
}


/* ═══════════════════════════════════════════
   9. Admin rarity pills
   ═══════════════════════════════════════════ */

.ne-pill--common { }
.ne-pill--rare { background: rgba(74, 158, 255, 0.15); color: var(--ne-rare-blue); }
.ne-pill--epic { background: rgba(168, 85, 247, 0.15); color: var(--ne-epic); }
.ne-pill--legendary { background: rgba(255, 184, 0, 0.15); color: var(--ne-legendary-gold); }


/* ═══════════════════════════════════════════
   10. Animations
   ═══════════════════════════════════════════ */

@keyframes ne-hex-shimmer {
	to { --ne-hex-angle: 360deg; }
}

@keyframes ne-hex-pulse-glow {
	0%, 100% {
		filter: drop-shadow(3px 3px 5px var(--ne-neu-dark))
		        drop-shadow(-2px -2px 4px var(--ne-neu-light))
		        drop-shadow(0 0 6px rgba(168, 85, 247, 0.2));
	}
	50% {
		filter: drop-shadow(3px 3px 5px var(--ne-neu-dark))
		        drop-shadow(-2px -2px 4px var(--ne-neu-light))
		        drop-shadow(0 0 16px rgba(168, 85, 247, 0.45));
	}
}

@keyframes ne-toast-in {
	from {
		opacity: 0;
		transform: translateX(100px) scale(0.9);
	}
	to {
		opacity: 1;
		transform: translateX(0) scale(1);
	}
}

@keyframes ne-toast-out {
	from {
		opacity: 1;
		transform: translateX(0);
	}
	to {
		opacity: 0;
		transform: translateX(100px);
	}
}

@keyframes ne-toast-badge-reveal {
	from {
		transform: scale(0) rotate(-30deg);
		opacity: 0;
	}
	to {
		transform: scale(1) rotate(0);
		opacity: 1;
	}
}

@keyframes ne-toast-flash {
	0% {
		transform: translateY(-50%) scale(0);
		opacity: 0.7;
	}
	100% {
		transform: translateY(-50%) scale(2.5);
		opacity: 0;
	}
}


/* ═══════════════════════════════════════════
   11. Responsive
   ═══════════════════════════════════════════ */

@media (max-width: 768px) {
	.ne-achievements-grid {
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
		gap: var(--ne-space-2);
	}

	.ne-achievements-grid--catalog {
		grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	}

	.ne-toast-container {
		top: auto;
		bottom: var(--ne-space-3);
		right: var(--ne-space-3);
		left: var(--ne-space-3);
	}

	.ne-toast {
		max-width: 100%;
	}

	.ne-achievement-card {
		padding: var(--ne-space-3) var(--ne-space-2);
	}

	.ne-achievement-card__name {
		font-size: 0.75rem;
	}

	/* Reduce badge sizes slightly on mobile */
	.ne-badge-hex--md {
		width: 48px;
		height: 55px;
	}

	.ne-badge-hex--md .ne-badge-hex__icon {
		font-size: 1.2rem;
	}

	.ne-badge-hex--lg {
		width: 60px;
		height: 69px;
	}

	.ne-badge-hex--lg .ne-badge-hex__icon {
		font-size: 1.5rem;
	}
}

@media (max-width: 480px) {
	.ne-achievements-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}


/* ═══════════════════════════════════════════
   12. Light theme overrides
   ═══════════════════════════════════════════ */

/* Light theme neumorphism adjustments */
body:not(.dark-theme) {
	--ne-neu-light: rgba(255, 255, 255, 0.7);
	--ne-neu-dark: rgba(0, 0, 0, 0.1);
	--ne-neu-inset-light: rgba(255, 255, 255, 0.5);
	--ne-neu-inset-dark: rgba(0, 0, 0, 0.12);
}

body:not(.dark-theme) .ne-badge-hex--common {
	background: linear-gradient(145deg, #b8bcc8, #8b90a5, #a0a5b8);
}

body:not(.dark-theme) .ne-badge-hex--locked {
	background: linear-gradient(145deg, #d5d8e0, #c0c4cf, #d5d8e0) !important;
}

body:not(.dark-theme) .ne-badge-hex__inner {
	background: linear-gradient(
		145deg,
		rgba(255, 255, 255, 0.6) 0%,
		var(--ne-surface) 40%,
		rgba(0, 0, 0, 0.05) 100%
	);
}

body:not(.dark-theme) .ne-achievement-card {
	background: linear-gradient(
		145deg,
		rgba(255, 255, 255, 0.5) 0%,
		var(--ne-surface) 40%,
		rgba(0, 0, 0, 0.04) 100%
	);
}

body:not(.dark-theme) .ne-achievement-card--locked {
	opacity: 0.5;
}

body:not(.dark-theme) .ne-toast {
	background: linear-gradient(
		145deg,
		rgba(255, 255, 255, 0.5) 0%,
		var(--ne-elevated) 40%,
		rgba(0, 0, 0, 0.04) 100%
	);
	box-shadow:
		6px 6px 16px rgba(0, 0, 0, 0.08),
		-3px -3px 10px rgba(255, 255, 255, 0.5);
}