@layer components {
    :root {
        --game-badge-gloss-color: oklch(100% 0 0);
        --game-badge-drop: light-dark(
            oklch(28% 0.03 60 / 0.32),
            oklch(0% 0 0 / 0.65)
        );
    }

    .game-badge {
        --game-badge-size: 4rem;
        --game-badge-enamel: oklch(48% 0.16 258deg);
        --game-badge-enamel-light: oklch(
            from var(--game-badge-enamel) calc(l + 0.14) calc(c * 0.85) h
        );
        --game-badge-enamel-deep: oklch(
            from var(--game-badge-enamel) calc(l - 0.13) c h
        );
        --game-badge-relief: oklch(
            from var(--game-badge-enamel) calc(l - 0.24) c h / 0.75
        );
        --game-badge-rays: oklch(
            from var(--game-badge-enamel) calc(l + 0.2) c h / 0.16
        );
        --game-badge-inset: oklch(
            from var(--game-badge-enamel) calc(l - 0.28) c h / 0.6
        );
        --game-badge-locked-face: light-dark(
            color-mix(in oklch, var(--label) 4%, var(--system-background)),
            color-mix(in oklch, var(--label) 9%, var(--system-background))
        );
        --game-badge-locked-rim: light-dark(
            color-mix(in oklch, var(--label) 11%, var(--system-background)),
            color-mix(in oklch, var(--label) 23%, var(--system-background))
        );
        --game-badge-locked-bevel: light-dark(
            color-mix(in oklch, var(--label) 7%, var(--system-background)),
            color-mix(in oklch, var(--label) 13%, var(--system-background))
        );
        --game-badge-locked-line: light-dark(
            color-mix(in oklch, var(--label) 32%, var(--system-background)),
            color-mix(in oklch, var(--label) 50%, var(--system-background))
        );
        --game-badge-locked-edge: light-dark(
            color-mix(in oklch, var(--label) 22%, var(--system-background)),
            color-mix(in oklch, var(--label) 34%, var(--system-background))
        );
        --game-badge-locked-relief: light-dark(
            color-mix(in oklch, var(--label) 16%, transparent),
            oklch(0% 0 0deg / 0.55)
        );
        --game-badge-locked-highlight: light-dark(
            oklch(100% 0 0deg / 0.9),
            oklch(100% 0 0deg / 0.14)
        );

        block-size: var(--game-badge-size);
        display: inline-flex;
        flex: none;
        inline-size: var(--game-badge-size);
        perspective: 30rem;
        vertical-align: middle;
    }

    .game-badge--size-small {
        --game-badge-size: 2.75rem;
    }

    .game-badge--size-large {
        --game-badge-size: 5.5rem;
    }

    .game-badge--metal-gold {
        --game-badge-metal-bright: oklch(97% 0.06 95deg);
        --game-badge-metal-light: oklch(90% 0.115 92deg);
        --game-badge-metal: oklch(79% 0.145 82deg);
        --game-badge-metal-dark: oklch(61% 0.13 68deg);
        --game-badge-metal-deep: oklch(45% 0.1 58deg);
    }

    .game-badge--metal-silver {
        --game-badge-metal-bright: oklch(99% 0.003 250deg);
        --game-badge-metal-light: oklch(92% 0.008 250deg);
        --game-badge-metal: oklch(81% 0.012 250deg);
        --game-badge-metal-dark: oklch(62% 0.016 255deg);
        --game-badge-metal-deep: oklch(46% 0.018 255deg);
    }

    .game-badge--metal-bronze {
        --game-badge-metal-bright: oklch(93% 0.05 70deg);
        --game-badge-metal-light: oklch(84% 0.085 62deg);
        --game-badge-metal: oklch(69% 0.115 52deg);
        --game-badge-metal-dark: oklch(53% 0.105 45deg);
        --game-badge-metal-deep: oklch(40% 0.08 40deg);
    }

    .game-badge--tone-amber {
        --game-badge-enamel: oklch(61% 0.155 56deg);
    }

    .game-badge--tone-aubergine {
        --game-badge-enamel: oklch(35% 0.09 318deg);
    }

    .game-badge--tone-azure {
        --game-badge-enamel: oklch(55% 0.12 238deg);
    }

    .game-badge--tone-cobalt {
        --game-badge-enamel: oklch(47% 0.16 260deg);
    }

    .game-badge--tone-espresso {
        --game-badge-enamel: oklch(34% 0.045 52deg);
    }

    .game-badge--tone-graphite {
        --game-badge-enamel: oklch(31% 0.012 262deg);
    }

    .game-badge--tone-house {
        --game-badge-enamel: oklch(from var(--tint) min(l, 0.52) c h);
    }

    .game-badge--tone-indigo {
        --game-badge-enamel: oklch(38% 0.14 284deg);
    }

    .game-badge--tone-magenta {
        --game-badge-enamel: oklch(48% 0.17 352deg);
    }

    .game-badge--tone-navy {
        --game-badge-enamel: oklch(33% 0.085 256deg);
    }

    .game-badge--tone-oxblood {
        --game-badge-enamel: oklch(40% 0.13 22deg);
    }

    .game-badge--tone-petrol {
        --game-badge-enamel: oklch(42% 0.07 218deg);
    }

    .game-badge--tone-plum {
        --game-badge-enamel: oklch(41% 0.12 332deg);
    }

    .game-badge--tone-rose {
        --game-badge-enamel: oklch(57% 0.13 8deg);
    }

    .game-badge--tone-slate {
        --game-badge-enamel: oklch(45% 0.03 248deg);
    }

    .game-badge--tone-teal {
        --game-badge-enamel: oklch(50% 0.09 200deg);
    }

    .game-badge--tone-terracotta {
        --game-badge-enamel: oklch(52% 0.12 46deg);
    }

    .game-badge--tone-ultramarine {
        --game-badge-enamel: oklch(40% 0.19 268deg);
    }

    .game-badge--tone-vermilion {
        --game-badge-enamel: oklch(54% 0.17 33deg);
    }

    .game-badge--tone-violet {
        --game-badge-enamel: oklch(48% 0.15 302deg);
    }

    .game-badge--tone-walnut {
        --game-badge-enamel: oklch(42% 0.065 62deg);
    }

    .game-badge__art {
        block-size: 100%;
        display: block;
        inline-size: 100%;
        overflow: visible;
    }

    .game-badge__stop--metal-bright {
        stop-color: var(--game-badge-metal-bright);
    }

    .game-badge__stop--metal-light {
        stop-color: var(--game-badge-metal-light);
    }

    .game-badge__stop--metal {
        stop-color: var(--game-badge-metal);
    }

    .game-badge__stop--metal-dark {
        stop-color: var(--game-badge-metal-dark);
    }

    .game-badge__stop--metal-deep {
        stop-color: var(--game-badge-metal-deep);
    }

    .game-badge__stop--enamel-light {
        stop-color: var(--game-badge-enamel-light);
    }

    .game-badge__stop--enamel {
        stop-color: var(--game-badge-enamel);
    }

    .game-badge__stop--enamel-deep {
        stop-color: var(--game-badge-enamel-deep);
    }

    .game-badge__stop--gloss {
        stop-color: var(--game-badge-gloss-color);
        stop-opacity: 0.34;
    }

    .game-badge__stop--gloss-clear {
        stop-color: var(--game-badge-gloss-color);
        stop-opacity: 0;
    }

    .game-badge__groove--line {
        stroke-width: 0.9;
    }

    .game-badge__numeral {
        font-weight: 800;
        letter-spacing: -0.03em;
    }

    .game-badge--earned {
        & .game-badge__art {
            filter: drop-shadow(0 0.1rem 0.15rem var(--game-badge-drop));
        }

        & .game-badge__groove {
            opacity: 0.5;
            stroke: var(--game-badge-metal-deep);
        }

        & .game-badge__groove--line {
            opacity: 0.35;
        }

        & .game-badge__rays {
            stroke: var(--game-badge-rays);
        }

        & .game-badge__inset {
            stroke: var(--game-badge-inset);
            stroke-width: 3.2;
        }

        & .game-badge__relief {
            fill: var(--game-badge-relief);
            stroke: var(--game-badge-relief);
        }

        & .game-badge__streak {
            fill: var(--game-badge-gloss-color);
            opacity: 0.11;
        }

        & .game-badge__glint {
            fill: var(--game-badge-gloss-color);
            transform-box: fill-box;
            transform-origin: center;
        }
    }

    .game-badge--locked {
        & .game-badge__rim {
            fill: var(--game-badge-locked-rim);
            stroke: var(--game-badge-locked-edge);
            stroke-width: 0.8;
        }

        & .game-badge__groove {
            opacity: 0.6;
            stroke: var(--game-badge-locked-edge);
        }

        & .game-badge__bevel {
            fill: var(--game-badge-locked-bevel);
        }

        & .game-badge__field {
            fill: var(--game-badge-locked-face);
        }

        & .game-badge__inset {
            stroke: var(--game-badge-locked-relief);
            stroke-width: 2.4;
        }

        & .game-badge__cut {
            fill: var(--game-badge-locked-face);
            stroke: var(--game-badge-locked-face);
        }

        & .game-badge__relief {
            fill: var(--game-badge-locked-relief);
            stroke: var(--game-badge-locked-relief);
        }

        & .game-badge__highlight {
            fill: var(--game-badge-locked-highlight);
            stroke: var(--game-badge-locked-highlight);
        }

        & .game-badge__glyph {
            fill: var(--game-badge-locked-line);
            stroke: var(--game-badge-locked-line);
        }
    }

    .game-badge--unlock {
        & .game-badge__art {
            animation: game-badge-flip 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s
                both;
        }

        & .game-badge__streak {
            animation: game-badge-sweep 0.7s ease-out 0.85s both;
        }

        & .game-badge__glint {
            animation: game-badge-glint 0.5s ease-out 1.3s both;
        }
    }

    @keyframes game-badge-flip {
        from {
            opacity: 0;
            rotate: y 300deg;
            scale: 0.35;
        }

        55% {
            opacity: 1;
            rotate: y -18deg;
            scale: 1.12;
        }

        78% {
            rotate: y 6deg;
            scale: 0.97;
        }

        to {
            opacity: 1;
            rotate: y 0deg;
            scale: 1;
        }
    }

    @keyframes game-badge-sweep {
        from {
            translate: -4.5rem 0;
        }

        to {
            translate: 0 0;
        }
    }

    @keyframes game-badge-glint {
        from {
            opacity: 0;
            scale: 0;
        }

        60% {
            opacity: 1;
            scale: 1.5;
        }

        to {
            opacity: 1;
            scale: 1;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .game-badge--unlock {
            & .game-badge__art,
            & .game-badge__streak,
            & .game-badge__glint {
                animation: none;
            }
        }
    }
}