.mystery-card { border: 1px solid #ffffff17; }
.mystery-card::before { content: ''; position: absolute; inset: 0; opacity: .8; }
.mystery-card--violet::before { background: radial-gradient(circle at 62% 25%, #9d69ff55, transparent 25%), radial-gradient(circle at 30% 68%, #ff5caa33, transparent 30%), linear-gradient(145deg, #211b37, #0e0d17 68%); }
.mystery-card--red::before { background: radial-gradient(circle at 50% 30%, #d4404b55, transparent 25%), radial-gradient(circle at 75% 70%, #a068ff28, transparent 27%), linear-gradient(145deg, #31171d, #100d12 68%); }
.mystery-card::after { background: linear-gradient(180deg, #0000 15%, #08070be8 88%); }
.mystery-symbol { position: absolute; z-index: 1; top: 42px; left: 50%; transform: translateX(-50%); color: #ffffff0e; font-size: 270px; font-weight: 800; line-height: 1; text-shadow: 0 0 70px #ff5caa25; }
.mystery-card .tag { background: #ffffff12; border: 1px solid #ffffff28; color: #f8ddeb; backdrop-filter: blur(8px); }
.mystery-card h2 { max-width: 360px; }
.mystery-status { display: inline-flex; align-items: center; gap: 9px; color: #f1b8d4; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.mystery-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 14px var(--pink); }
.mystery-card:hover .mystery-symbol { color: #ffffff16; transform: translateX(-50%) scale(1.04); transition: .4s ease; }