Achievement Ribbon Tile

Server component, no hooks. The ribbon under the circle is two identical data-part="tail" elements with a shared clip-path tail, the right one mirrored with transform:scaleX(-1), so both tails are guaranteed symmetric at any width and tier rather than being fitted separately by numbers. The circle and the ribbon are coloured from a single --vibeui-icontile-013-hue variable, which tier switches (bronze, silver, gold) — the metal of the achievement is nowhere picked by hand as a separate colour. The circle sits above the ribbon through z-index, and the caption is text below it, hidden on a narrow container through @container. The palette has been moved to light-dark(): the caption follows the page color-scheme, and the tile has no surface of its own — one appears only together with the background prop, and then the theme branch is computed from the lightness of the given colour.