/* Сложные задачи — «золото с блёстками».
   .gold-badge — золотая плашка/кружок (переливающийся фон, пробегающий блик, мерцающие искры);
   .gold-text  — золотой переливающийся текст с искоркой справа сверху. */

.gold-badge {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(135deg, #8a6a12 0%, #d4af37 22%, #fff1a8 42%, #e8c547 55%, #b8860b 78%, #f3d36b 100%);
    background-size: 250% 250%;
    color: #3a2a00 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 8px rgba(212, 175, 55, 0.55);
    animation: gold-shift 5s ease-in-out infinite;
}

/* Пробегающий блик */
.gold-badge::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.75) 50%, transparent 60%);
    transform: translateX(-100%);
    animation: gold-glint 3.2s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

/* Искры */
.gold-badge::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 22% 28%, #fff 0 1.3px, transparent 2.2px),
        radial-gradient(circle at 76% 22%, #fff 0 1.6px, transparent 2.6px),
        radial-gradient(circle at 82% 70%, #fff 0 1.2px, transparent 2px),
        radial-gradient(circle at 28% 76%, #fff 0 1px, transparent 1.8px),
        radial-gradient(circle at 52% 14%, #fffbe0 0 1px, transparent 1.8px);
    animation: gold-twinkle 2.4s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

.gold-text {
    position: relative;
    display: inline-block;
    background: linear-gradient(90deg, #8a6408 0%, #b8860b 30%, #e9c24a 45%, #fff0a8 50%, #e9c24a 55%, #b8860b 70%, #8a6408 100%);
    background-size: 200% auto;
    filter: drop-shadow(0 0 0.6px rgba(110, 75, 0, 0.45));
    -webkit-background-clip: text;
    background-clip: text;
    color: #b8860b;
    -webkit-text-fill-color: transparent;
    animation: gold-text-shift 3s linear infinite;
}

.gold-text::after {
    content: '✦';
    position: absolute;
    top: -0.35em;
    right: -0.55em;
    font-size: 0.6em;
    color: #e6b422;
    -webkit-text-fill-color: #e6b422;
    text-shadow: 0 0 3px rgba(255, 200, 40, 0.95), 0 0 1px rgba(120, 80, 0, 0.6);
    animation: gold-twinkle 1.8s ease-in-out infinite;
    pointer-events: none;
}

/* Экстра-задачи — «аметист с блёстками»: те же перелив, блик и искры, что у
   сложных, в фиолетовых тонах. .amethyst-badge — плашка/кружок, .amethyst-text — текст. */
.amethyst-badge {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(135deg, #4b1d78 0%, #8e44ad 22%, #e8c8ff 42%, #b06ee0 55%, #6a2c9e 78%, #d7a8ff 100%);
    background-size: 250% 250%;
    color: #ffffff !important;
    text-shadow: 0 1px 1px rgba(40, 0, 70, 0.6);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 8px rgba(155, 89, 182, 0.6);
    animation: gold-shift 5s ease-in-out infinite;
}
.amethyst-badge::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.7) 50%, transparent 60%);
    transform: translateX(-100%);
    animation: gold-glint 3.6s ease-in-out 0.8s infinite;
    pointer-events: none;
    z-index: -1;
}
.amethyst-badge::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 22% 28%, #fff 0 1.3px, transparent 2.2px),
        radial-gradient(circle at 76% 22%, #fff 0 1.6px, transparent 2.6px),
        radial-gradient(circle at 82% 70%, #fff 0 1.2px, transparent 2px),
        radial-gradient(circle at 28% 76%, #f3e0ff 0 1px, transparent 1.8px);
    animation: gold-twinkle 2.2s ease-in-out 0.4s infinite;
    pointer-events: none;
    z-index: -1;
}
.amethyst-text {
    position: relative;
    display: inline-block;
    background: linear-gradient(90deg, #5b2a86 0%, #8e44ad 30%, #c58cf0 45%, #f3e0ff 50%, #c58cf0 55%, #8e44ad 70%, #5b2a86 100%);
    background-size: 200% auto;
    filter: drop-shadow(0 0 0.6px rgba(60, 0, 100, 0.45));
    -webkit-background-clip: text;
    background-clip: text;
    color: #9b59b6;
    -webkit-text-fill-color: transparent;
    animation: gold-text-shift 3.4s linear infinite;
}
.amethyst-text::after {
    content: '✦';
    position: absolute;
    top: -0.35em;
    right: -0.55em;
    font-size: 0.6em;
    color: #c58cf0;
    -webkit-text-fill-color: #c58cf0;
    text-shadow: 0 0 3px rgba(197, 140, 240, 0.95);
    animation: gold-twinkle 1.9s ease-in-out infinite;
    pointer-events: none;
}
html[data-dark] .amethyst-text {
    background-image: linear-gradient(90deg, #a46ad6 0%, #c58cf0 30%, #e4c4ff 45%, #ffffff 50%, #e4c4ff 55%, #c58cf0 70%, #a46ad6 100%);
}

@keyframes gold-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes gold-glint {
    0%, 55% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes gold-twinkle {
    0%, 100% { opacity: 0.25; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1); }
}

@keyframes gold-text-shift {
    to { background-position: 200% center; }
}

@media (prefers-reduced-motion: reduce) {
    .gold-badge, .gold-badge::before, .gold-badge::after, .gold-text, .gold-text::after,
    .amethyst-badge, .amethyst-badge::before, .amethyst-badge::after, .amethyst-text, .amethyst-text::after {
        animation: none;
    }
    .gold-badge::before, .amethyst-badge::before {
        display: none;
    }
}