/* Full-screen opaque takeover (never composited over page content — the
final hero assets are opaque video, not alpha-transparent).
The stage is a lit room, not a flat backdrop: a photographic plate drifting
behind rotating god-rays, a breathing tier-colored aura, a drifting mote
field (rarium-starfield.js) and a vignette that keeps every phase's
content readable on top of all of it. Every layer takes its hue from the
shop's own tier tokens, so a richer stage never invents a color the tier
tell doesn't already own (CLAUDE.md: tells stay truthful). */
html, body {
margin: 0;
padding: 0;
}
/* Generated mask fields, named once.
*
* Every one of these is referenced twice — the prefixed and unprefixed
* mask property — and inlining the URI at both sites duplicated ~55 KB of
* SVG path data in a stylesheet that ships to every buyer on every reveal.
* A custom property is the cheapest fix that keeps both declarations: the
* prefixed form cannot simply be dropped, because -webkit-mask-composite
* takes different keywords from mask-composite and Safari still needs it.
*
* Authored by the generator scripts described at each use site; edit those
* and regenerate rather than hand-tuning path data here.
*/
:root {
--pc-field-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M193.5 118.9L190.9 124.2L196.1 126.9L190.3 127.3L190.5 133.2L187.2 128.3L182.3 131.5L184.9 126.2L179.7 123.5L185.5 123.1L185.3 117.2L188.6 122.1Z' fill='%23fff' opacity='0.85'/%3E%3Cpath d='M39.8 169.5L39.4 171.2L41.1 171.5L39.6 172.4L40.7 173.8L39.0 173.4L38.7 175.1L37.8 173.6L36.4 174.7L36.8 173.0L35.1 172.7L36.6 171.8L35.5 170.4L37.2 170.8L37.5 169.1L38.4 170.6Z' fill='%23fff' opacity='0.57'/%3E%3Ccircle cx='99.3' cy='186.9' r='2.9' fill='%23fff' opacity='0.56'/%3E%3Cpath d='M182.2 63.2L182.0 66.0L184.5 67.2L181.8 67.9L181.4 70.6L179.9 68.3L177.2 68.8L179.0 66.6L177.7 64.2L180.2 65.2Z' fill='%23fff' opacity='0.8'/%3E%3Cpath d='M138.2 57.2L133.7 60.5L135.0 66.0L131.7 61.5L126.2 62.8L130.7 59.5L129.4 54.0L132.7 58.5Z' fill='%23fff' opacity='0.77'/%3E%3Cpath d='M91.0 30.7L86.3 41.6L97.1 46.6L85.3 48.0L86.3 59.8L79.3 50.3L69.6 57.1L74.3 46.2L63.5 41.2L75.3 39.8L74.3 28.0L81.3 37.5Z' fill='none' stroke='%23fff' stroke-width='1.6' opacity='0.89'/%3E%3Cpath d='M136.3 55.5L136.3 58.5L139.1 59.7L136.2 60.6L136.0 63.6L134.2 61.2L131.2 61.9L133.0 59.4L131.4 56.8L134.3 57.8Z' fill='%23fff' opacity='0.57'/%3E%3Cpath d='M161.1 133.6L155.1 143.0L161.5 152.2L150.7 149.5L144.0 158.3L143.2 147.2L132.7 143.6L143.0 139.4L143.3 128.3L150.4 136.8Z' fill='%23fff' opacity='0.57'/%3E%3Cpath d='M87.6 129.2L87.4 135.8L94.0 136.1L88.2 139.3L91.2 145.1L85.6 141.7L82.0 147.2L82.2 140.6L75.6 140.3L81.4 137.1L78.4 131.3L84.0 134.7Z' fill='none' stroke='%23fff' stroke-width='1.6' opacity='1'/%3E%3Cpath d='M105.7 73.7L102.5 82.6L109.4 89.0L99.9 88.7L95.9 97.3L93.3 88.2L84.0 87.0L91.8 81.7L90.0 72.5L97.4 78.3Z' fill='none' stroke='%23fff' stroke-width='1.6' opacity='0.98'/%3E%3Ccircle cx='20.3' cy='16.1' r='2.0' fill='%23fff' opacity='0.71'/%3E%3Cpath d='M101.8 115.6L101.5 124.6L109.7 128.4L101.0 130.9L99.9 139.8L94.9 132.4L86.0 134.1L91.5 127.0L87.1 119.1L95.6 122.2Z' fill='none' stroke='%23fff' stroke-width='1.6' opacity='0.93'/%3E%3Cpath d='M1.8 56.5L2.2 59.6L5.4 59.3L2.9 61.2L4.8 63.8L1.8 62.6L0.6 65.5L0.2 62.4L-3.0 62.7L-0.5 60.8L-2.4 58.2L0.6 59.4Z' fill='%23fff' opacity='0.77'/%3E%3Cpath d='M53.0 116.2L53.9 119.0L56.9 119.3L54.4 121.0L55.1 123.9L52.7 122.2L50.1 123.6L51.1 120.8L48.9 118.9L51.8 118.9Z' fill='%23fff' opacity='0.83'/%3E%3Cpath d='M39.1 25.3L37.7 33.3L45.7 35.0L38.0 37.8L40.5 45.5L34.3 40.2L28.9 46.3L30.3 38.3L22.3 36.6L30.0 33.8L27.5 26.1L33.7 31.4Z' fill='none' stroke='%23fff' stroke-width='1.6' opacity='0.91'/%3E%3Cpath d='M125.6 177.8L125.5 179.8L127.5 179.8L125.9 181.1L127.4 182.4L125.4 182.3L125.4 184.3L124.1 182.7L122.8 184.2L122.9 182.2L120.9 182.2L122.5 180.9L121.0 179.6L123.0 179.7L123.0 177.7L124.3 179.3Z' fill='%23fff' opacity='0.73'/%3E%3Cpath d='M92.3 23.7L93.3 29.9L99.4 28.3L95.7 33.4L101.1 36.5L94.9 37.5L96.5 43.6L91.4 39.9L88.3 45.3L87.3 39.1L81.2 40.7L84.9 35.6L79.5 32.5L85.7 31.5L84.1 25.4L89.2 29.1Z' fill='%23fff' opacity='0.85'/%3E%3Cpath d='M67.3 165.4L63.7 169.7L66.2 174.7L61.9 171.1L56.9 173.6L60.5 169.3L58.0 164.3L62.3 167.9Z' fill='none' stroke='%23fff' stroke-width='1.6' opacity='0.75'/%3E%3Cpath d='M48.0 112.4L44.3 115.6L45.8 120.2L42.6 116.5L38.0 118.0L41.7 114.8L40.2 110.2L43.4 113.9Z' fill='%23fff' opacity='0.79'/%3E%3Cpath d='M177.1 141.2L176.4 145.4L180.6 145.7L177.1 148.2L179.9 151.4L175.7 150.7L175.4 154.9L172.9 151.4L169.7 154.2L170.4 150.0L166.2 149.7L169.7 147.2L166.9 144.0L171.1 144.7L171.4 140.5L173.9 144.0Z' fill='%23fff' opacity='0.72'/%3E%3Cpath d='M139.1 139.3L139.8 142.4L142.9 141.7L140.6 143.9L142.7 146.2L139.7 145.3L138.7 148.3L138.0 145.2L134.9 145.9L137.2 143.7L135.1 141.4L138.1 142.3Z' fill='%23fff' opacity='0.6'/%3E%3Cpath d='M133.5 148.8L132.5 154.0L137.9 154.5L133.5 157.5L136.9 161.6L131.7 160.6L131.2 166.0L128.2 161.6L124.1 165.0L125.1 159.8L119.7 159.3L124.1 156.3L120.7 152.2L125.9 153.2L126.4 147.8L129.4 152.2Z' fill='%23fff' opacity='0.9'/%3E%3Cpath d='M158.5 41.8L157.0 43.3L157.9 45.2L156.0 44.3L154.4 45.8L154.7 43.7L152.8 42.6L154.9 42.2L155.4 40.1L156.4 42.0Z' fill='%23fff' opacity='0.56'/%3E%3Cpath d='M138.8 184.5L136.4 193.9L144.1 199.8L134.7 197.4L128.8 205.1L131.2 195.7L123.5 189.8L132.9 192.2Z' fill='none' stroke='%23fff' stroke-width='1.6' opacity='0.79'/%3E%3Cpath d='M35.1 112.9L29.3 118.2L34.4 124.1L27.0 121.7L24.4 129.1L22.7 121.4L15.1 122.9L20.9 117.6L15.8 111.7L23.2 114.1L25.8 106.7L27.5 114.4Z' fill='%23fff' opacity='0.58'/%3E%3Cpath d='M178.0 113.5L178.0 117.4L181.9 117.5L178.5 119.5L180.4 122.9L177.0 121.0L175.0 124.3L175.0 120.4L171.1 120.3L174.5 118.3L172.6 114.9L176.0 116.8Z' fill='%23fff' opacity='0.62'/%3E%3Cpath d='M191.0 71.9L189.0 74.3L190.5 77.0L187.6 75.9L185.4 78.1L185.6 75.0L182.8 73.7L185.8 72.9L186.3 69.8L187.9 72.4Z' fill='%23fff' opacity='0.51'/%3E%3Cpath d='M44.1 24.3L44.5 27.5L47.6 28.3L44.7 29.7L44.9 32.8L42.7 30.5L39.7 31.7L41.2 28.9L39.2 26.4L42.4 27.0Z' fill='%23fff' opacity='0.7'/%3E%3Cpath d='M17.4 -2.0L17.7 3.0L22.7 2.2L19.3 6.0L23.3 8.9L18.3 9.2L19.1 14.2L15.3 10.8L12.4 14.8L12.1 9.8L7.1 10.6L10.5 6.8L6.5 3.9L11.5 3.6L10.7 -1.4L14.5 2.0Z' fill='none' stroke='%23fff' stroke-width='1.6' opacity='0.88'/%3E%3Cpath d='M113.3 -9.1L107.1 0.2L113.2 9.6L103.9 3.4L94.5 9.5L100.7 0.2L94.6 -9.2L103.9 -3.0Z' fill='%23fff' opacity='0.87'/%3E%3C/svg%3E");
--pc-field-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M125.6 41.0L127.2 49.4L135.6 48.1L129.1 53.6L134.5 60.2L126.5 57.4L123.4 65.4L121.8 57.0L113.4 58.3L119.9 52.8L114.5 46.2L122.5 49.0Z' fill='%23fff' opacity='0.65'/%3E%3Cpath d='M80.6 26.7L74.6 32.9L78.1 40.8L70.3 37.1L63.9 42.8L65.0 34.2L57.6 29.9L66.0 28.3L67.9 19.9L72.0 27.5Z' fill='%23fff' opacity='0.88'/%3E%3Cpath d='M125.1 92.7L122.4 100.2L128.3 105.6L120.3 105.4L117.0 112.7L114.8 105.0L106.8 104.1L113.4 99.6L111.8 91.8L118.1 96.7Z' fill='none' stroke='%23fff' stroke-width='1.6' opacity='0.58'/%3E%3Cpath d='M132.2 129.4L131.1 135.0L136.7 135.6L131.9 138.7L135.5 143.1L129.9 142.0L129.3 147.6L126.2 142.8L121.8 146.4L122.9 140.8L117.3 140.2L122.1 137.1L118.5 132.7L124.1 133.8L124.7 128.2L127.8 133.0Z' fill='%23fff' opacity='0.76'/%3E%3Cpath d='M118.3 118.5L115.0 120.8L115.8 124.8L113.5 121.5L109.5 122.3L112.8 120.0L112.0 116.0L114.3 119.3Z' fill='%23fff' opacity='0.51'/%3E%3Cpath d='M13.3 121.7L13.9 126.6L18.7 127.9L14.2 130.0L14.4 135.0L11.0 131.4L6.4 133.1L8.8 128.7L5.7 124.9L10.6 125.8Z' fill='none' stroke='%23fff' stroke-width='1.6' opacity='0.68'/%3E%3Cpath d='M103.6 145.2L105.0 150.0L109.9 150.7L105.7 153.5L106.7 158.4L102.7 155.3L98.3 157.7L100.1 153.0L96.5 149.5L101.5 149.7Z' fill='none' stroke='%23fff' stroke-width='1.6' opacity='0.95'/%3E%3Cpath d='M40.8 147.6L41.8 151.4L45.6 150.5L42.8 153.3L45.5 156.1L41.7 155.1L40.6 158.8L39.6 155.0L35.8 155.9L38.6 153.1L35.9 150.3L39.7 151.3Z' fill='%23fff' opacity='0.86'/%3E%3Cpath d='M92.9 52.9L90.0 60.3L97.2 63.4L89.4 64.5L90.3 72.3L85.4 66.2L79.1 70.9L82.0 63.5L74.8 60.4L82.6 59.3L81.7 51.5L86.6 57.6Z' fill='%23fff' opacity='0.68'/%3E%3Cpath d='M60.6 86.6L60.4 89.4L63.0 90.6L60.3 91.4L59.9 94.2L58.3 91.8L55.6 92.4L57.3 90.2L56.0 87.7L58.6 88.7Z' fill='%23fff' opacity='0.77'/%3E%3Cpath d='M38.0 90.6L38.1 92.8L40.2 93.6L38.1 94.4L38.0 96.6L36.6 94.9L34.4 95.5L35.7 93.6L34.4 91.7L36.6 92.3Z' fill='%23fff' opacity='0.79'/%3E%3Cpath d='M160.4 8.3L161.8 17.6L170.9 19.9L162.5 24.1L163.1 33.4L156.6 26.8L147.8 30.2L152.1 21.9L146.2 14.7L155.4 16.2Z' fill='none' stroke='%23fff' stroke-width='1.6' opacity='0.8'/%3E%3Cpath d='M192.7 43.5L192.3 45.9L194.3 47.2L192.0 47.5L191.4 49.9L190.3 47.7L187.9 47.9L189.6 46.2L188.7 44.0L190.8 45.1Z' fill='%23fff' opacity='0.6'/%3E%3Cpath d='M149.0 23.9L140.5 32.4L144.9 43.5L134.3 38.0L125.1 45.7L127.0 33.8L116.9 27.4L128.7 25.6L131.7 14.0L137.0 24.7Z' fill='none' stroke='%23fff' stroke-width='1.6' opacity='0.9'/%3E%3Cpath d='M26.4 65.2L26.4 67.3L28.3 68.1L26.3 68.8L26.1 70.9L24.9 69.2L22.8 69.7L24.0 67.9L23.0 66.1L25.0 66.8Z' fill='%23fff' opacity='0.9'/%3E%3Cpath d='M175.9 80.5L177.9 89.1L186.3 86.3L181.6 93.8L189.5 97.7L180.9 99.7L183.7 108.1L176.2 103.4L172.3 111.3L170.3 102.7L161.9 105.5L166.6 98.0L158.7 94.1L167.3 92.1L164.5 83.7L172.0 88.4Z' fill='%23fff' opacity='0.86'/%3E%3Cpath d='M18.6 127.2L19.2 129.6L21.5 128.8L20.3 130.9L22.5 131.9L20.1 132.5L20.9 134.8L18.8 133.6L17.8 135.8L17.2 133.4L14.9 134.2L16.1 132.1L13.9 131.1L16.3 130.5L15.5 128.2L17.6 129.4Z' fill='%23fff' opacity='0.71'/%3E%3Cpath d='M54.2 100.9L53.3 103.0L55.4 103.9L53.2 104.2L53.4 106.4L52.0 104.6L50.2 105.9L51.1 103.8L49.0 102.9L51.2 102.6L51.0 100.4L52.4 102.2Z' fill='%23fff' opacity='0.55'/%3E%3Cpath d='M151.7 22.5L147.3 26.8L151.5 31.3L145.6 29.6L143.8 35.5L142.3 29.6L136.3 30.9L140.7 26.6L136.5 22.1L142.4 23.8L144.2 17.9L145.7 23.8Z' fill='none' stroke='%23fff' stroke-width='1.6' opacity='0.63'/%3E%3Cpath d='M43.6 171.5L45.6 184.6L58.4 187.9L46.5 193.9L47.3 207.1L38.1 197.6L25.7 202.5L31.8 190.7L23.4 180.5L36.5 182.7Z' fill='none' stroke='%23fff' stroke-width='1.6' opacity='0.7'/%3E%3Cpath d='M14.4 0.7L11.5 3.4L14.5 6.0L10.6 5.9L10.9 9.8L8.2 6.9L5.6 9.9L5.7 6.0L1.8 6.3L4.7 3.6L1.7 1.0L5.6 1.1L5.3 -2.8L8.0 0.1L10.6 -2.9L10.5 1.0Z' fill='%23fff' opacity='0.72'/%3E%3Cpath d='M71.2 162.1L71.6 176.4L84.9 181.6L70.6 182.0L65.4 195.3L65.0 181.0L51.7 175.8L66.0 175.4Z' fill='%23fff' opacity='0.6'/%3E%3C/svg%3E");
--pc-field-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M112.4 46.0L111.5 54.6L119.0 58.8L110.4 57.9L106.2 65.4L107.1 56.8L99.6 52.6L108.2 53.5Z' fill='none' stroke='%23fff' stroke-width='1.6' opacity='0.75'/%3E%3Cpath d='M86.4 66.4L81.8 69.4L82.7 74.9L79.7 70.3L74.2 71.2L78.8 68.2L77.9 62.7L80.9 67.3Z' fill='%23fff' opacity='0.87'/%3E%3Cpath d='M69.5 141.0L69.3 149.0L76.6 152.3L68.6 152.1L65.3 159.4L65.5 151.4L58.2 148.1L66.2 148.3Z' fill='none' stroke='%23fff' stroke-width='1.6' opacity='0.6'/%3E%3Cpath d='M46.6 21.4L46.2 24.0L48.4 25.5L45.8 25.9L45.1 28.5L43.9 26.1L41.2 26.3L43.1 24.4L42.1 21.9L44.5 23.1Z' fill='%23fff' opacity='0.56'/%3E%3Cpath d='M114.2 88.3L116.0 95.2L123.1 96.2L117.1 100.1L118.3 107.1L112.8 102.6L106.5 106.0L109.1 99.3L103.9 94.4L111.0 94.7Z' fill='%23fff' opacity='0.68'/%3E%3Cpath d='M132.5 132.4L133.3 135.4L136.3 136.0L133.7 137.6L134.1 140.6L131.8 138.6L129.0 140.0L130.2 137.2L128.0 134.9L131.1 135.2Z' fill='%23fff' opacity='0.92'/%3E%3Cpath d='M105.4 116.5L99.6 120.8L101.3 127.8L97.0 122.0L90.0 123.7L95.8 119.4L94.1 112.4L98.4 118.2Z' fill='%23fff' opacity='0.74'/%3E%3Cpath d='M47.1 174.4L47.5 182.0L55.1 181.8L48.7 185.9L52.7 192.4L45.9 189.0L42.3 195.6L41.9 188.0L34.3 188.2L40.7 184.1L36.7 177.6L43.5 181.0Z' fill='%23fff' opacity='0.54'/%3E%3Cpath d='M192.2 132.3L190.0 135.7L193.6 137.5L189.7 138.4L191.0 142.3L187.6 140.1L185.8 143.7L184.9 139.8L181.0 141.1L183.2 137.7L179.6 135.9L183.5 135.0L182.2 131.1L185.6 133.3L187.4 129.7L188.3 133.6Z' fill='%23fff' opacity='0.6'/%3E%3Cpath d='M149.6 18.8L144.9 22.4L148.4 27.2L142.9 25.0L140.6 30.4L139.7 24.6L133.8 25.2L138.5 21.6L135.0 16.8L140.5 19.0L142.8 13.6L143.7 19.4Z' fill='%23fff' opacity='0.92'/%3E%3Cpath d='M39.9 148.7L37.4 157.0L44.0 162.6L35.7 160.1L30.1 166.7L32.6 158.4L26.0 152.8L34.3 155.3Z' fill='%23fff' opacity='0.84'/%3E%3Cpath d='M165.2 1.2L164.0 4.8L166.9 7.3L163.3 6.1L160.8 9.0L162.0 5.4L159.1 2.9L162.7 4.1Z' fill='%23fff' opacity='0.84'/%3E%3Cpath d='M134.5 81.0L133.4 83.2L135.5 84.4L133.1 84.5L133.1 86.9L131.8 84.9L129.7 86.2L130.8 84.0L128.7 82.8L131.1 82.7L131.1 80.3L132.4 82.3Z' fill='%23fff' opacity='0.85'/%3E%3Cpath d='M204.1 50.2L201.2 54.7L204.2 59.1L199.7 56.2L195.3 59.2L198.2 54.7L195.2 50.3L199.7 53.2Z' fill='none' stroke='%23fff' stroke-width='1.6' opacity='0.94'/%3E%3Cpath d='M65.8 147.8L65.0 149.3L66.6 149.9L65.0 150.4L65.6 152.0L64.1 151.2L63.5 152.8L63.0 151.2L61.4 151.8L62.2 150.3L60.6 149.7L62.2 149.2L61.6 147.6L63.1 148.4L63.7 146.8L64.2 148.4Z' fill='%23fff' opacity='0.85'/%3E%3Cpath d='M113.9 3.2L108.1 8.5L110.6 15.9L105.3 10.1L97.9 12.6L103.7 7.3L101.2 -0.1L106.5 5.7Z' fill='%23fff' opacity='0.72'/%3E%3Cpath d='M193.8 45.3L192.6 47.0L194.3 48.3L192.2 48.1L192.0 50.2L191.1 48.3L189.2 49.1L190.4 47.4L188.7 46.1L190.8 46.3L191.0 44.2L191.9 46.1Z' fill='%23fff' opacity='0.75'/%3E%3Ccircle cx='84.3' cy='68.4' r='1.5' fill='%23fff' opacity='0.88'/%3E%3Cpath d='M78.4 103.2L79.1 107.3L83.2 108.3L79.5 110.2L79.8 114.3L76.8 111.4L73.0 113.0L74.8 109.3L72.1 106.1L76.2 106.8Z' fill='%23fff' opacity='0.82'/%3E%3Cpath d='M177.2 21.1L177.7 23.6L180.3 23.2L178.3 24.9L179.9 26.9L177.5 26.1L176.6 28.5L176.1 26.0L173.5 26.4L175.5 24.7L173.9 22.7L176.3 23.5Z' fill='%23fff' opacity='0.53'/%3E%3Cpath d='M155.9 -0.1L156.3 6.9L162.9 9.2L156.4 11.8L156.3 18.7L151.8 13.4L145.1 15.4L148.8 9.5L144.9 3.7L151.6 5.5Z' fill='%23fff' opacity='0.68'/%3E%3Cpath d='M50.9 35.0L51.9 38.5L55.5 38.9L52.5 41.0L53.2 44.6L50.3 42.4L47.2 44.2L48.4 40.7L45.7 38.2L49.3 38.3Z' fill='%23fff' opacity='0.81'/%3E%3Cpath d='M162.1 90.7L162.4 95.3L166.8 96.8L162.2 97.1L160.7 101.5L160.4 96.9L156.0 95.4L160.6 95.1Z' fill='%23fff' opacity='0.78'/%3E%3Ccircle cx='97.1' cy='54.1' r='2.6' fill='%23fff' opacity='0.53'/%3E%3Cpath d='M25.4 132.6L25.4 139.1L31.3 141.7L24.8 141.7L22.2 147.6L22.2 141.1L16.3 138.5L22.8 138.5Z' fill='none' stroke='%23fff' stroke-width='1.6' opacity='0.61'/%3E%3Cpath d='M110.0 26.2L110.6 31.4L115.7 32.8L111.0 35.0L111.2 40.2L107.6 36.4L102.7 38.3L105.2 33.7L102.0 29.6L107.1 30.5Z' fill='%23fff' opacity='0.99'/%3E%3Cpath d='M8.8 72.1L9.6 75.3L12.9 75.9L10.1 77.6L10.6 80.9L8.1 78.8L5.1 80.3L6.4 77.2L4.0 74.9L7.3 75.1Z' fill='%23fff' opacity='0.9'/%3E%3Cpath d='M33.6 72.8L33.3 79.2L39.8 79.7L34.1 82.7L36.9 88.5L31.4 85.1L27.8 90.4L28.1 84.0L21.6 83.5L27.3 80.5L24.5 74.7L30.0 78.1Z' fill='%23fff' opacity='0.98'/%3E%3Ccircle cx='187.9' cy='62' r='3.9' fill='%23fff' opacity='0.84'/%3E%3Cpath d='M160.6 62.0L157.0 66.2L159.5 71.1L155.3 67.5L150.4 70.0L154.0 65.8L151.5 60.9L155.7 64.5Z' fill='none' stroke='%23fff' stroke-width='1.6' opacity='0.82'/%3E%3Cpath d='M126.8 99.1L125.2 101.3L127.3 103.0L124.6 102.7L124.2 105.4L123.1 102.9L120.6 103.9L122.2 101.7L120.1 100.0L122.8 100.3L123.2 97.6L124.3 100.1Z' fill='%23fff' opacity='0.61'/%3E%3Cpath d='M128.3 156.4L128.2 159.8L131.5 159.6L129.0 161.9L131.6 164.1L128.2 164.0L128.4 167.3L126.1 164.8L123.9 167.4L124.0 164.0L120.7 164.2L123.2 161.9L120.6 159.7L124.0 159.8L123.8 156.5L126.1 159.0Z' fill='%23fff' opacity='0.61'/%3E%3Cpath d='M44.1 113.9L42.8 115.8L44.1 117.7L41.8 117.1L40.4 118.9L40.3 116.6L38.1 115.8L40.3 115.0L40.4 112.7L41.8 114.5Z' fill='%23fff' opacity='0.53'/%3E%3Cpath d='M86.5 27.1L84.6 29.8L86.3 32.7L83.6 30.8L80.7 32.5L82.6 29.8L80.9 26.9L83.6 28.8Z' fill='%23fff' opacity='0.72'/%3E%3Cpath d='M100.4 -0.8L97.9 4.6L102.0 9.1L96.0 8.4L93.1 13.6L91.9 7.7L86.0 6.5L91.2 3.6L90.6 -2.4L95.0 1.7Z' fill='none' stroke='%23fff' stroke-width='1.6' opacity='0.72'/%3E%3Cpath d='M189.6 173.5L188.3 176.3L191.1 177.8L187.9 178.1L188.1 181.3L186.3 178.6L183.6 180.3L184.9 177.5L182.1 176.0L185.3 175.7L185.1 172.5L186.9 175.2Z' fill='%23fff' opacity='0.69'/%3E%3Cpath d='M152.6 97.8L151.8 100.3L154.3 101.2L151.7 101.8L152.2 104.4L150.4 102.4L148.4 104.2L149.2 101.7L146.7 100.8L149.3 100.2L148.8 97.6L150.6 99.6Z' fill='%23fff' opacity='0.7'/%3E%3Ccircle cx='154.1' cy='173' r='1.7' fill='%23fff' opacity='1'/%3E%3C/svg%3E");
--pc-field-4: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Ccircle cx='44.9' cy='130.8' r='1.8' fill='%23fff' opacity='0.6'/%3E%3Cpath d='M138.0 11.0L146.2 11.0M141.7 11.0L143.4 8.8M141.7 11.0L143.4 13.2M143.9 11.0L145.0 9.6M143.9 11.0L145.0 12.4M138.0 11.0L142.1 18.1M139.8 14.2L142.6 14.6M139.8 14.2L138.8 16.8M141.0 16.1L142.7 16.4M141.0 16.1L140.3 17.8M138.0 11.0L133.9 18.1M136.2 14.2L137.2 16.8M136.2 14.2L133.4 14.6M135.0 16.1L135.7 17.8M135.0 16.1L133.3 16.4M138.0 11.0L129.8 11.0M134.3 11.0L132.6 13.2M134.3 11.0L132.6 8.8M132.1 11.0L131.0 12.4M132.1 11.0L131.0 9.6M138.0 11.0L133.9 3.9M136.2 7.8L133.4 7.4M136.2 7.8L137.2 5.2M135.0 5.9L133.3 5.6M135.0 5.9L135.7 4.2M138.0 11.0L142.1 3.9M139.8 7.8L138.8 5.2M139.8 7.8L142.6 7.4M141.0 5.9L140.3 4.2M141.0 5.9L142.7 5.6' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' opacity='0.86'/%3E%3Ccircle cx='7' cy='150.1' r='1.9' fill='%23fff' opacity='0.69'/%3E%3Cpath d='M54.6 136.6L53.9 138.3L55.6 139.0L53.7 139.3L54.0 141.1L52.9 139.6L51.4 140.8L52.1 139.1L50.4 138.4L52.3 138.1L52.0 136.3L53.1 137.8Z' fill='%23fff' opacity='0.83'/%3E%3Ccircle cx='142' cy='25.2' r='1.1' fill='%23fff' opacity='0.78'/%3E%3Ccircle cx='16.1' cy='136.9' r='1.2' fill='%23fff' opacity='0.7'/%3E%3Cpath d='M5.8 49.1L4.6 50.4L6.0 51.6L4.2 51.2L3.9 53.0L3.3 51.3L1.6 51.9L2.8 50.6L1.4 49.4L3.2 49.8L3.5 48.0L4.1 49.7Z' fill='%23fff' opacity='0.81'/%3E%3Cpath d='M90.1 144.0L89.4 148.5L93.9 149.1L89.7 150.7L91.3 154.9L87.9 152.1L85.1 155.6L85.8 151.1L81.3 150.5L85.5 148.9L83.9 144.7L87.3 147.5Z' fill='%23fff' opacity='0.56'/%3E%3Cpath d='M107.9 7.5L105.0 11.8L109.3 14.6L104.2 14.2L103.9 19.4L101.7 14.8L97.1 17.1L100.0 12.8L95.7 10.0L100.8 10.4L101.1 5.2L103.3 9.8Z' fill='%23fff' opacity='0.9'/%3E%3Cpath d='M67.3 29.1L86.1 29.1M75.8 29.1L79.7 24.1M75.8 29.1L79.7 34.1M80.8 29.1L83.4 25.9M80.8 29.1L83.4 32.3M67.3 29.1L76.7 45.4M71.5 36.4L77.9 37.4M71.5 36.4L69.2 42.4M74.1 40.8L78.2 41.4M74.1 40.8L72.5 44.7M67.3 29.1L57.9 45.4M63.1 36.4L65.4 42.4M63.1 36.4L56.7 37.4M60.5 40.8L62.1 44.7M60.5 40.8L56.4 41.4M67.3 29.1L48.5 29.1M58.8 29.1L54.9 34.1M58.8 29.1L54.9 24.1M53.8 29.1L51.2 32.3M53.8 29.1L51.2 25.9M67.3 29.1L57.9 12.8M63.1 21.8L56.7 20.8M63.1 21.8L65.4 15.8M60.5 17.4L56.4 16.8M60.5 17.4L62.1 13.5M67.3 29.1L76.7 12.8M71.5 21.8L69.2 15.8M71.5 21.8L77.9 20.8M74.1 17.4L72.5 13.5M74.1 17.4L78.2 16.8' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' opacity='0.69'/%3E%3Ccircle cx='50.7' cy='12.9' r='0.9' fill='%23fff' opacity='0.55'/%3E%3Ccircle cx='117.7' cy='42.9' r='1.7' fill='%23fff' opacity='0.97'/%3E%3Cpath d='M50.2 134.9L50.7 138.5L54.2 138.0L51.4 140.1L53.6 142.9L50.3 141.6L49.0 144.9L48.5 141.3L45.0 141.8L47.8 139.7L45.6 136.9L48.9 138.2Z' fill='%23fff' opacity='0.76'/%3E%3Cpath d='M152.5 74.9L152.6 77.5L155.2 77.4L153.0 78.7L154.3 80.9L152.1 79.6L150.9 81.9L150.8 79.3L148.2 79.4L150.4 78.1L149.1 75.9L151.3 77.2Z' fill='%23fff' opacity='0.85'/%3E%3Cpath d='M203.8 -2.4L201.2 2.2L205.8 4.6L200.6 4.7L200.7 9.9L198.1 5.5L193.6 8.2L196.2 3.6L191.6 1.2L196.8 1.1L196.7 -4.1L199.3 0.3Z' fill='%23fff' opacity='0.85'/%3E%3Ccircle cx='91.5' cy='51.7' r='2.0' fill='%23fff' opacity='0.61'/%3E%3Cpath d='M87.7 18.7L101.3 18.7M93.8 18.7L96.7 15.1M93.8 18.7L96.7 22.3M97.5 18.7L99.4 16.4M97.5 18.7L99.4 21.0M87.7 18.7L94.5 30.5M90.8 24.0L95.3 24.7M90.8 24.0L89.1 28.3M92.6 27.2L95.6 27.6M92.6 27.2L91.5 30.0M87.7 18.7L80.9 30.5M84.6 24.0L86.3 28.3M84.6 24.0L80.1 24.7M82.8 27.2L83.9 30.0M82.8 27.2L79.8 27.6M87.7 18.7L74.1 18.7M81.6 18.7L78.7 22.3M81.6 18.7L78.7 15.1M77.9 18.7L76.0 21.0M77.9 18.7L76.0 16.4M87.7 18.7L80.9 6.9M84.6 13.4L80.1 12.7M84.6 13.4L86.3 9.1M82.8 10.2L79.8 9.8M82.8 10.2L83.9 7.4M87.7 18.7L94.5 6.9M90.8 13.4L89.1 9.1M90.8 13.4L95.3 12.7M92.6 10.2L91.5 7.4M92.6 10.2L95.6 9.8' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' opacity='1'/%3E%3Cpath d='M15.6 87.3L31.9 87.3M22.9 87.3L26.4 83.0M22.9 87.3L26.4 91.6M27.3 87.3L29.6 84.5M27.3 87.3L29.6 90.1M15.6 87.3L23.8 101.4M19.3 93.7L24.7 94.5M19.3 93.7L17.2 98.8M21.5 97.5L25.0 98.0M21.5 97.5L20.1 100.8M15.6 87.3L7.5 101.4M11.9 93.7L14.0 98.8M11.9 93.7L6.5 94.5M9.7 97.5L11.1 100.8M9.7 97.5L6.2 98.0M15.6 87.3L-0.7 87.3M8.3 87.3L4.8 91.6M8.3 87.3L4.8 83.0M3.9 87.3L1.6 90.1M3.9 87.3L1.6 84.5M15.6 87.3L7.4 73.2M11.9 80.9L6.5 80.1M11.9 80.9L14.0 75.8M9.7 77.1L6.2 76.6M9.7 77.1L11.1 73.8M15.6 87.3L23.7 73.2M19.3 80.9L17.2 75.8M19.3 80.9L24.7 80.1M21.5 77.1L20.1 73.8M21.5 77.1L25.0 76.6' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' opacity='1'/%3E%3Cpath d='M177.5 98.6L188.7 98.6M182.5 98.6L184.9 95.6M182.5 98.6L184.9 101.6M185.6 98.6L187.1 96.7M185.6 98.6L187.1 100.5M177.5 98.6L183.1 108.3M180.0 103.0L183.8 103.5M180.0 103.0L178.6 106.5M181.5 105.6L184.0 105.9M181.5 105.6L180.6 107.9M177.5 98.6L171.9 108.3M175.0 103.0L176.4 106.5M175.0 103.0L171.2 103.5M173.5 105.6L174.4 107.9M173.5 105.6L171.0 105.9M177.5 98.6L166.3 98.6M172.5 98.6L170.1 101.6M172.5 98.6L170.1 95.6M169.4 98.6L167.9 100.5M169.4 98.6L167.9 96.7M177.5 98.6L171.9 88.9M175.0 94.2L171.2 93.7M175.0 94.2L176.4 90.7M173.5 91.6L171.0 91.3M173.5 91.6L174.4 89.3M177.5 98.6L183.1 88.9M180.0 94.2L178.6 90.7M180.0 94.2L183.8 93.7M181.5 91.6L180.6 89.3M181.5 91.6L184.0 91.3' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' opacity='0.83'/%3E%3Cpath d='M17.3 188.4L33.3 188.4M24.5 188.4L27.9 184.1M24.5 188.4L27.9 192.7M28.8 188.4L31.0 185.6M28.8 188.4L31.0 191.2M17.3 188.4L25.3 202.3M20.9 194.6L26.3 195.4M20.9 194.6L18.9 199.7M23.1 198.4L26.5 198.9M23.1 198.4L21.8 201.7M17.3 188.4L9.3 202.3M13.7 194.6L15.7 199.7M13.7 194.6L8.3 195.4M11.5 198.4L12.8 201.7M11.5 198.4L8.1 198.9M17.3 188.4L1.3 188.4M10.1 188.4L6.7 192.7M10.1 188.4L6.7 184.1M5.8 188.4L3.6 191.2M5.8 188.4L3.6 185.6M17.3 188.4L9.3 174.5M13.7 182.2L8.3 181.4M13.7 182.2L15.7 177.1M11.5 178.4L8.1 177.9M11.5 178.4L12.8 175.1M17.3 188.4L25.3 174.5M20.9 182.2L18.9 177.1M20.9 182.2L26.3 181.4M23.1 178.4L21.8 175.1M23.1 178.4L26.5 177.9' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' opacity='0.86'/%3E%3Cpath d='M30.9 30.3L40.5 30.3M35.2 30.3L37.2 27.7M35.2 30.3L37.2 32.9M37.8 30.3L39.1 28.6M37.8 30.3L39.1 32.0M30.9 30.3L35.7 38.6M33.1 34.0L36.3 34.5M33.1 34.0L31.9 37.1M34.4 36.3L36.4 36.6M34.4 36.3L33.6 38.3M30.9 30.3L26.1 38.6M28.7 34.0L29.9 37.1M28.7 34.0L25.5 34.5M27.4 36.3L28.2 38.3M27.4 36.3L25.4 36.6M30.9 30.3L21.3 30.3M26.6 30.3L24.6 32.9M26.6 30.3L24.6 27.7M24.0 30.3L22.7 32.0M24.0 30.3L22.7 28.6M30.9 30.3L26.1 22.0M28.7 26.6L25.5 26.1M28.7 26.6L29.9 23.5M27.4 24.3L25.4 24.0M27.4 24.3L28.2 22.3M30.9 30.3L35.7 22.0M33.1 26.6L31.9 23.5M33.1 26.6L36.3 26.1M34.4 24.3L33.6 22.3M34.4 24.3L36.4 24.0' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' opacity='0.95'/%3E%3Ccircle cx='82.6' cy='24.9' r='0.9' fill='%23fff' opacity='0.55'/%3E%3Cpath d='M27.8 63.3L27.5 68.2L32.4 68.4L28.0 70.6L30.2 75.0L26.1 72.2L23.4 76.3L23.7 71.4L18.8 71.2L23.2 69.0L21.0 64.6L25.1 67.4Z' fill='%23fff' opacity='0.81'/%3E%3Ccircle cx='39.1' cy='5.9' r='2.6' fill='%23fff' opacity='0.88'/%3E%3Ccircle cx='92.1' cy='1.9' r='2.4' fill='%23fff' opacity='0.52'/%3E%3Cpath d='M24.6 23.2L23.4 26.2L26.4 27.3L23.2 27.8L23.7 30.9L21.7 28.4L19.2 30.4L20.4 27.4L17.4 26.3L20.6 25.8L20.1 22.7L22.1 25.2Z' fill='%23fff' opacity='0.57'/%3E%3Cpath d='M155.5 67.7L155.6 69.7L157.7 69.6L155.9 70.7L157.0 72.5L155.2 71.5L154.3 73.3L154.2 71.3L152.1 71.4L153.9 70.3L152.8 68.5L154.6 69.5Z' fill='%23fff' opacity='0.56'/%3E%3Cpath d='M192.6 107.2L206.5 107.2M198.9 107.2L201.8 103.5M198.9 107.2L201.8 110.9M202.6 107.2L204.5 104.8M202.6 107.2L204.5 109.6M192.6 107.2L199.5 119.2M195.7 112.6L200.4 113.3M195.7 112.6L194.0 117.0M197.6 115.9L200.6 116.3M197.6 115.9L196.5 118.7M192.6 107.2L185.7 119.2M189.5 112.6L191.2 117.0M189.5 112.6L184.8 113.3M187.6 115.9L188.7 118.7M187.6 115.9L184.6 116.3M192.6 107.2L178.7 107.2M186.3 107.2L183.4 110.9M186.3 107.2L183.4 103.5M182.6 107.2L180.7 109.6M182.6 107.2L180.7 104.8M192.6 107.2L185.6 95.2M189.5 101.8L184.8 101.1M189.5 101.8L191.2 97.4M187.6 98.5L184.6 98.1M187.6 98.5L188.7 95.7M192.6 107.2L199.5 95.2M195.7 101.8L194.0 97.4M195.7 101.8L200.4 101.1M197.6 98.5L196.5 95.7M197.6 98.5L200.6 98.1' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' opacity='0.82'/%3E%3Cpath d='M58.2 79.0L56.7 83.5L61.3 84.9L56.6 85.9L57.7 90.5L54.5 87.0L51.0 90.2L52.5 85.7L47.9 84.3L52.6 83.3L51.5 78.7L54.7 82.2Z' fill='%23fff' opacity='0.63'/%3E%3Cpath d='M81.5 14.8L89.2 14.8M85.0 14.8L86.6 12.7M85.0 14.8L86.6 16.9M87.0 14.8L88.1 13.5M87.0 14.8L88.1 16.1M81.5 14.8L85.3 21.5M83.2 17.8L85.8 18.2M83.2 17.8L82.3 20.2M84.3 19.6L85.9 19.8M84.3 19.6L83.6 21.2M81.5 14.8L77.7 21.5M79.8 17.8L80.7 20.2M79.8 17.8L77.2 18.2M78.7 19.6L79.4 21.2M78.7 19.6L77.1 19.8M81.5 14.8L73.8 14.8M78.0 14.8L76.4 16.9M78.0 14.8L76.4 12.7M76.0 14.8L74.9 16.1M76.0 14.8L74.9 13.5M81.5 14.8L77.6 8.1M79.8 11.8L77.2 11.4M79.8 11.8L80.7 9.4M78.7 10.0L77.1 9.8M78.7 10.0L79.4 8.4M81.5 14.8L85.3 8.1M83.2 11.8L82.3 9.4M83.2 11.8L85.8 11.4M84.3 10.0L83.6 8.4M84.3 10.0L85.9 9.8' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' opacity='0.95'/%3E%3Cpath d='M131.7 180.8L132.4 183.4L135.0 182.7L133.1 184.6L135.0 186.5L132.4 185.8L131.7 188.4L131.0 185.8L128.4 186.5L130.3 184.6L128.4 182.7L131.0 183.4Z' fill='%23fff' opacity='0.86'/%3E%3Cpath d='M89.2 74.0L104.0 74.0M95.9 74.0L99.0 70.1M95.9 74.0L99.0 77.9M99.9 74.0L101.9 71.4M99.9 74.0L101.9 76.6M89.2 74.0L96.6 86.8M92.5 79.8L97.5 80.5M92.5 79.8L90.7 84.4M94.5 83.2L97.7 83.7M94.5 83.2L93.3 86.3M89.2 74.0L81.8 86.8M85.9 79.8L87.7 84.4M85.9 79.8L80.9 80.5M83.9 83.2L85.1 86.3M83.9 83.2L80.7 83.7M89.2 74.0L74.4 74.0M82.5 74.0L79.4 77.9M82.5 74.0L79.4 70.1M78.5 74.0L76.5 76.6M78.5 74.0L76.5 71.4M89.2 74.0L81.8 61.2M85.9 68.2L80.9 67.5M85.9 68.2L87.7 63.6M83.9 64.8L80.7 64.3M83.9 64.8L85.1 61.7M89.2 74.0L96.6 61.2M92.5 68.2L90.7 63.6M92.5 68.2L97.5 67.5M94.5 64.8L93.3 61.7M94.5 64.8L97.7 64.3' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' opacity='0.72'/%3E%3Cpath d='M16.1 180.6L15.6 185.9L20.9 186.3L16.1 188.5L18.4 193.2L14.1 190.2L11.1 194.6L11.6 189.3L6.3 188.9L11.1 186.7L8.8 182.0L13.1 185.0Z' fill='%23fff' opacity='0.66'/%3E%3Ccircle cx='195.1' cy='120.9' r='1.4' fill='%23fff' opacity='0.68'/%3E%3C/svg%3E");
--pc-field-5: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M58.4 91.8L58.3 94.5L61.1 94.6L58.6 95.9L60.0 98.3L57.6 96.9L56.2 99.2L56.3 96.5L53.5 96.4L56.0 95.1L54.6 92.7L57.0 94.1Z' fill='%23fff' opacity='0.54'/%3E%3Cpath d='M137.7 77.5L135.9 80.7L139.1 82.4L135.4 82.5L135.5 86.2L133.7 83.0L130.5 84.9L132.3 81.7L129.1 80.0L132.8 79.9L132.7 76.2L134.5 79.4Z' fill='%23fff' opacity='0.63'/%3E%3Ccircle cx='179.1' cy='149.3' r='0.9' fill='%23fff' opacity='0.92'/%3E%3Cpath d='M139.8 132.4L139.9 135.2L142.7 135.1L140.3 136.6L141.9 139.0L139.3 137.7L138.0 140.2L137.9 137.4L135.1 137.5L137.5 136.0L135.9 133.6L138.5 134.9Z' fill='%23fff' opacity='0.58'/%3E%3Cpath d='M130.7 133.8L139.4 133.8M134.6 133.8L136.5 131.5M134.6 133.8L136.5 136.1M137.0 133.8L138.2 132.3M137.0 133.8L138.2 135.3M130.7 133.8L135.0 141.3M132.7 137.2L135.6 137.6M132.7 137.2L131.6 139.9M133.8 139.2L135.7 139.5M133.8 139.2L133.1 141.0M130.7 133.8L126.3 141.3M128.7 137.2L129.8 139.9M128.7 137.2L125.8 137.6M127.6 139.2L128.3 141.0M127.6 139.2L125.7 139.5M130.7 133.8L122.0 133.8M126.8 133.8L124.9 136.1M126.8 133.8L124.9 131.5M124.4 133.8L123.2 135.3M124.4 133.8L123.2 132.3M130.7 133.8L126.3 126.3M128.7 130.4L125.8 130.0M128.7 130.4L129.8 127.7M127.6 128.4L125.7 128.1M127.6 128.4L128.3 126.6M130.7 133.8L135.0 126.3M132.7 130.4L131.6 127.7M132.7 130.4L135.6 130.0M133.8 128.4L133.1 126.6M133.8 128.4L135.7 128.1' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' opacity='0.97'/%3E%3Cpath d='M145.1 51.1L168.1 51.1M155.4 51.1L160.3 45.0M155.4 51.1L160.3 57.2M161.7 51.1L164.8 47.1M161.7 51.1L164.8 55.1M145.1 51.1L156.6 71.0M150.3 60.1L158.0 61.2M150.3 60.1L147.4 67.3M153.4 65.4L158.4 66.2M153.4 65.4L151.5 70.1M145.1 51.1L133.6 71.0M139.9 60.1L142.8 67.3M139.9 60.1L132.2 61.2M136.8 65.4L138.7 70.1M136.8 65.4L131.8 66.2M145.1 51.1L122.1 51.1M134.8 51.1L129.9 57.2M134.8 51.1L129.9 45.0M128.5 51.1L125.4 55.1M128.5 51.1L125.4 47.1M145.1 51.1L133.6 31.2M139.9 42.1L132.2 41.0M139.9 42.1L142.8 34.9M136.8 36.8L131.8 36.0M136.8 36.8L138.7 32.1M145.1 51.1L156.6 31.2M150.3 42.1L147.4 34.9M150.3 42.1L158.0 41.0M153.4 36.8L151.5 32.1M153.4 36.8L158.4 36.0' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' opacity='0.63'/%3E%3Ccircle cx='187.8' cy='5.7' r='1.8' fill='%23fff' opacity='0.74'/%3E%3Cpath d='M96.5 178.4L117.7 178.4M106.0 178.4L110.5 172.8M106.0 178.4L110.5 184.0M111.8 178.4L114.7 174.7M111.8 178.4L114.7 182.1M96.5 178.4L107.1 196.8M101.3 186.7L108.4 187.7M101.3 186.7L98.6 193.4M104.1 191.6L108.7 192.3M104.1 191.6L102.4 196.0M96.5 178.4L85.9 196.8M91.7 186.7L94.4 193.4M91.7 186.7L84.6 187.7M88.9 191.6L90.6 196.0M88.9 191.6L84.3 192.3M96.5 178.4L75.3 178.4M87.0 178.4L82.5 184.0M87.0 178.4L82.5 172.8M81.2 178.4L78.3 182.1M81.2 178.4L78.3 174.7M96.5 178.4L85.9 160.0M91.7 170.1L84.6 169.1M91.7 170.1L94.4 163.4M88.9 165.2L84.3 164.5M88.9 165.2L90.6 160.8M96.5 178.4L107.1 160.0M101.3 170.1L98.6 163.4M101.3 170.1L108.4 169.1M104.1 165.2L102.4 160.8M104.1 165.2L108.7 164.5' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' opacity='0.95'/%3E%3Ccircle cx='109.4' cy='41.3' r='1.0' fill='%23fff' opacity='0.55'/%3E%3Ccircle cx='124.1' cy='81.9' r='1.9' fill='%23fff' opacity='0.74'/%3E%3Cpath d='M176.7 183.6L173.4 187.5L177.4 190.6L172.4 189.8L171.6 194.8L169.8 190.0L165.1 191.8L168.4 187.9L164.4 184.8L169.4 185.6L170.2 180.6L172.0 185.4Z' fill='%23fff' opacity='0.84'/%3E%3Cpath d='M145.8 116.3L162.0 116.3M153.1 116.3L156.5 112.0M153.1 116.3L156.5 120.6M157.5 116.3L159.7 113.5M157.5 116.3L159.7 119.1M145.8 116.3L153.9 130.3M149.4 122.6L154.9 123.4M149.4 122.6L147.4 127.7M151.6 126.4L155.2 126.9M151.6 126.4L150.3 129.7M145.8 116.3L137.7 130.3M142.2 122.6L144.2 127.7M142.2 122.6L136.7 123.4M140.0 126.4L141.3 129.7M140.0 126.4L136.4 126.9M145.8 116.3L129.6 116.3M138.5 116.3L135.1 120.6M138.5 116.3L135.1 112.0M134.1 116.3L131.9 119.1M134.1 116.3L131.9 113.5M145.8 116.3L137.7 102.3M142.2 110.0L136.7 109.2M142.2 110.0L144.2 104.9M140.0 106.2L136.4 105.7M140.0 106.2L141.3 102.9M145.8 116.3L153.9 102.3M149.4 110.0L147.4 104.9M149.4 110.0L154.9 109.2M151.6 106.2L150.3 102.9M151.6 106.2L155.2 105.7' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' opacity='0.99'/%3E%3Cpath d='M116.3 18.7L116.2 23.9L121.4 23.9L116.8 26.4L119.4 30.9L114.9 28.2L112.3 32.7L112.4 27.5L107.2 27.5L111.8 25.0L109.2 20.5L113.7 23.2Z' fill='%23fff' opacity='0.94'/%3E%3Ccircle cx='8.2' cy='76.9' r='2.7' fill='%23fff' opacity='0.5'/%3E%3Cpath d='M150.1 163.6L148.8 165.1L150.3 166.4L148.4 166.0L148.0 168.0L147.4 166.1L145.5 166.8L146.8 165.3L145.3 164.0L147.2 164.4L147.6 162.4L148.2 164.3Z' fill='%23fff' opacity='0.65'/%3E%3Cpath d='M18.3 28.1L26.5 28.1M22.0 28.1L23.7 25.9M22.0 28.1L23.7 30.3M24.2 28.1L25.3 26.7M24.2 28.1L25.3 29.5M18.3 28.1L22.4 35.2M20.1 31.3L22.9 31.7M20.1 31.3L19.1 33.9M21.3 33.2L23.0 33.5M21.3 33.2L20.6 34.9M18.3 28.1L14.2 35.2M16.5 31.3L17.5 33.9M16.5 31.3L13.7 31.7M15.3 33.2L16.0 34.9M15.3 33.2L13.6 33.5M18.3 28.1L10.1 28.1M14.6 28.1L12.9 30.3M14.6 28.1L12.9 25.9M12.4 28.1L11.3 29.5M12.4 28.1L11.3 26.7M18.3 28.1L14.2 21.0M16.5 24.9L13.7 24.5M16.5 24.9L17.5 22.3M15.3 23.0L13.6 22.7M15.3 23.0L16.0 21.3M18.3 28.1L22.4 21.0M20.1 24.9L19.1 22.3M20.1 24.9L22.9 24.5M21.3 23.0L20.6 21.3M21.3 23.0L23.0 22.7' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' opacity='0.8'/%3E%3Cpath d='M17.5 172.0L14.1 176.1L18.3 179.4L13.1 178.5L12.3 183.8L10.4 178.8L5.5 180.8L8.9 176.7L4.7 173.4L9.9 174.3L10.7 169.0L12.6 174.0Z' fill='%23fff' opacity='0.63'/%3E%3Cpath d='M2.4 116.4L26.0 116.4M13.0 116.4L18.0 110.1M13.0 116.4L18.0 122.7M19.4 116.4L22.6 112.3M19.4 116.4L22.6 120.5M2.4 116.4L14.2 136.8M7.7 125.6L15.6 126.8M7.7 125.6L4.8 133.1M10.9 131.1L16.0 131.9M10.9 131.1L9.0 135.9M2.4 116.4L-9.4 136.8M-2.9 125.6L0.0 133.1M-2.9 125.6L-10.8 126.8M-6.1 131.1L-4.2 135.9M-6.1 131.1L-11.2 131.9M2.4 116.4L-21.2 116.4M-8.2 116.4L-13.2 122.7M-8.2 116.4L-13.2 110.1M-14.6 116.4L-17.8 120.5M-14.6 116.4L-17.8 112.3M2.4 116.4L-9.4 96.0M-2.9 107.2L-10.8 106.0M-2.9 107.2L0.0 99.7M-6.1 101.7L-11.2 100.9M-6.1 101.7L-4.2 96.9M2.4 116.4L14.2 96.0M7.7 107.2L4.8 99.7M7.7 107.2L15.6 106.0M10.9 101.7L9.0 96.9M10.9 101.7L16.0 100.9' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' opacity='0.69'/%3E%3Ccircle cx='33.1' cy='117.5' r='2.3' fill='%23fff' opacity='0.68'/%3E%3Cpath d='M81.8 160.3L81.3 164.8L85.7 165.2L81.6 167.0L83.4 171.1L79.8 168.4L77.2 172.1L77.7 167.6L73.3 167.2L77.4 165.4L75.6 161.3L79.2 164.0Z' fill='%23fff' opacity='0.72'/%3E%3Cpath d='M71.2 147.5L70.9 151.0L74.4 151.3L71.2 152.8L72.7 156.0L69.8 154.0L67.8 156.9L68.1 153.4L64.6 153.1L67.8 151.6L66.3 148.4L69.2 150.4Z' fill='%23fff' opacity='0.61'/%3E%3Ccircle cx='54.9' cy='83.9' r='1.6' fill='%23fff' opacity='0.51'/%3E%3Cpath d='M12.5 68.2L20.7 68.2M16.2 68.2L17.9 66.0M16.2 68.2L17.9 70.4M18.4 68.2L19.5 66.8M18.4 68.2L19.5 69.6M12.5 68.2L16.6 75.3M14.3 71.4L17.1 71.8M14.3 71.4L13.3 74.0M15.5 73.3L17.2 73.6M15.5 73.3L14.8 75.0M12.5 68.2L8.4 75.3M10.7 71.4L11.7 74.0M10.7 71.4L7.9 71.8M9.5 73.3L10.2 75.0M9.5 73.3L7.8 73.6M12.5 68.2L4.3 68.2M8.8 68.2L7.1 70.4M8.8 68.2L7.1 66.0M6.6 68.2L5.5 69.6M6.6 68.2L5.5 66.8M12.5 68.2L8.4 61.1M10.7 65.0L7.9 64.6M10.7 65.0L11.7 62.4M9.5 63.1L7.8 62.8M9.5 63.1L10.2 61.4M12.5 68.2L16.6 61.1M14.3 65.0L13.3 62.4M14.3 65.0L17.1 64.6M15.5 63.1L14.8 61.4M15.5 63.1L17.2 62.8' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' opacity='0.8'/%3E%3Cpath d='M196.4 25.2L196.7 28.6L200.2 28.2L197.3 30.3L199.4 33.1L196.2 31.6L194.8 34.8L194.5 31.4L191.0 31.8L193.9 29.7L191.8 26.9L195.0 28.4Z' fill='%23fff' opacity='0.68'/%3E%3Ccircle cx='47.4' cy='109.7' r='1.1' fill='%23fff' opacity='0.69'/%3E%3Cpath d='M72.6 25.9L92.5 25.9M81.6 25.9L85.8 20.6M81.6 25.9L85.8 31.2M86.9 25.9L89.6 22.5M86.9 25.9L89.6 29.3M72.6 25.9L82.5 43.1M77.1 33.7L83.8 34.6M77.1 33.7L74.6 39.9M79.8 38.3L84.1 39.0M79.8 38.3L78.2 42.4M72.6 25.9L62.6 43.1M68.1 33.7L70.6 39.9M68.1 33.7L61.4 34.6M65.4 38.3L67.0 42.4M65.4 38.3L61.1 39.0M72.6 25.9L52.7 25.9M63.6 25.9L59.4 31.2M63.6 25.9L59.4 20.6M58.3 25.9L55.6 29.3M58.3 25.9L55.6 22.5M72.6 25.9L62.6 8.7M68.1 18.1L61.4 17.2M68.1 18.1L70.6 11.9M65.4 13.5L61.1 12.8M65.4 13.5L67.0 9.4M72.6 25.9L82.5 8.7M77.1 18.1L74.6 11.9M77.1 18.1L83.8 17.2M79.8 13.5L78.2 9.4M79.8 13.5L84.1 12.8' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' opacity='0.56'/%3E%3C/svg%3E");
--pc-field-6: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M177.7 79.1L191.3 79.1M183.8 79.1L186.7 75.5M183.8 79.1L186.7 82.7M187.5 79.1L189.4 76.8M187.5 79.1L189.4 81.4M177.7 79.1L184.5 90.9M180.8 84.4L185.3 85.1M180.8 84.4L179.1 88.7M182.6 87.6L185.6 88.0M182.6 87.6L181.5 90.4M177.7 79.1L170.9 90.9M174.6 84.4L176.3 88.7M174.6 84.4L170.1 85.1M172.8 87.6L173.9 90.4M172.8 87.6L169.8 88.0M177.7 79.1L164.1 79.1M171.6 79.1L168.7 82.7M171.6 79.1L168.7 75.5M167.9 79.1L166.0 81.4M167.9 79.1L166.0 76.8M177.7 79.1L170.9 67.3M174.6 73.8L170.1 73.1M174.6 73.8L176.3 69.5M172.8 70.6L169.8 70.2M172.8 70.6L173.9 67.8M177.7 79.1L184.5 67.3M180.8 73.8L179.1 69.5M180.8 73.8L185.3 73.1M182.6 70.6L181.5 67.8M182.6 70.6L185.6 70.2' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' opacity='0.57'/%3E%3Cpath d='M115.8 190.6L123.5 190.6M119.3 190.6L120.9 188.5M119.3 190.6L120.9 192.7M121.3 190.6L122.4 189.3M121.3 190.6L122.4 191.9M115.8 190.6L119.6 197.3M117.5 193.6L120.1 194.0M117.5 193.6L116.6 196.0M118.6 195.4L120.2 195.6M118.6 195.4L117.9 197.0M115.8 190.6L112.0 197.3M114.1 193.6L115.0 196.0M114.1 193.6L111.5 194.0M113.0 195.4L113.7 197.0M113.0 195.4L111.4 195.6M115.8 190.6L108.1 190.6M112.3 190.6L110.7 192.7M112.3 190.6L110.7 188.5M110.3 190.6L109.2 191.9M110.3 190.6L109.2 189.3M115.8 190.6L111.9 183.9M114.1 187.6L111.5 187.2M114.1 187.6L115.0 185.2M113.0 185.8L111.4 185.6M113.0 185.8L113.7 184.2M115.8 190.6L119.6 183.9M117.5 187.6L116.6 185.2M117.5 187.6L120.1 187.2M118.6 185.8L117.9 184.2M118.6 185.8L120.2 185.6' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' opacity='0.96'/%3E%3Cpath d='M57.4 173.4L58.1 178.2L62.8 177.5L59.0 180.5L62.1 184.2L57.6 182.4L55.8 187.0L55.1 182.2L50.4 182.9L54.2 179.9L51.1 176.2L55.6 178.0Z' fill='%23fff' opacity='1'/%3E%3Ccircle cx='74.1' cy='126.1' r='2.3' fill='%23fff' opacity='0.78'/%3E%3Ccircle cx='148.8' cy='157.3' r='2.2' fill='%23fff' opacity='0.88'/%3E%3Ccircle cx='29.4' cy='193.1' r='2.7' fill='%23fff' opacity='0.87'/%3E%3Ccircle cx='99.1' cy='26.3' r='2.2' fill='%23fff' opacity='0.56'/%3E%3Cpath d='M165.8 70.7L165.4 73.2L167.9 73.5L165.6 74.4L166.5 76.7L164.5 75.2L163.0 77.1L163.4 74.6L160.9 74.3L163.2 73.4L162.3 71.1L164.3 72.6Z' fill='%23fff' opacity='0.94'/%3E%3Cpath d='M99.5 27.9L123.3 27.9M110.2 27.9L115.2 21.6M110.2 27.9L115.2 34.2M116.6 27.9L119.9 23.8M116.6 27.9L119.9 32.0M99.5 27.9L111.4 48.5M104.9 37.2L112.9 38.4M104.9 37.2L101.9 44.7M108.1 42.7L113.2 43.5M108.1 42.7L106.1 47.6M99.5 27.9L87.6 48.5M94.1 37.2L97.1 44.7M94.1 37.2L86.1 38.4M90.9 42.7L92.9 47.6M90.9 42.7L85.8 43.5M99.5 27.9L75.7 27.9M88.8 27.9L83.8 34.2M88.8 27.9L83.8 21.6M82.4 27.9L79.1 32.0M82.4 27.9L79.1 23.8M99.5 27.9L87.6 7.3M94.1 18.6L86.1 17.4M94.1 18.6L97.1 11.1M90.9 13.1L85.8 12.3M90.9 13.1L92.9 8.2M99.5 27.9L111.4 7.3M104.9 18.6L101.9 11.1M104.9 18.6L112.9 17.4M108.1 13.1L106.1 8.2M108.1 13.1L113.2 12.3' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' opacity='0.64'/%3E%3Cpath d='M43.1 62.8L51.4 62.8M46.8 62.8L48.6 60.6M46.8 62.8L48.6 65.0M49.1 62.8L50.2 61.4M49.1 62.8L50.2 64.2M43.1 62.8L47.3 70.0M45.0 66.0L47.8 66.4M45.0 66.0L43.9 68.7M46.1 68.0L47.9 68.2M46.1 68.0L45.4 69.7M43.1 62.8L39.0 70.0M41.2 66.0L42.3 68.7M41.2 66.0L38.4 66.4M40.1 68.0L40.8 69.7M40.1 68.0L38.3 68.2M43.1 62.8L34.8 62.8M39.4 62.8L37.6 65.0M39.4 62.8L37.6 60.6M37.1 62.8L36.0 64.2M37.1 62.8L36.0 61.4M43.1 62.8L38.9 55.6M41.2 59.6L38.4 59.2M41.2 59.6L42.3 56.9M40.1 57.6L38.3 57.4M40.1 57.6L40.8 55.9M43.1 62.8L47.3 55.6M45.0 59.6L43.9 56.9M45.0 59.6L47.8 59.2M46.1 57.6L45.4 55.9M46.1 57.6L47.9 57.4' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' opacity='0.69'/%3E%3Ccircle cx='198.3' cy='176.7' r='2.0' fill='%23fff' opacity='0.65'/%3E%3Ccircle cx='98.8' cy='194.4' r='1.6' fill='%23fff' opacity='0.71'/%3E%3Cpath d='M54.3 73.9L54.3 75.8L56.1 75.8L54.5 76.7L55.4 78.3L53.8 77.3L52.9 78.9L52.9 77.0L51.1 77.0L52.7 76.1L51.8 74.5L53.4 75.5Z' fill='%23fff' opacity='0.91'/%3E%3Cpath d='M163.1 168.9L161.2 171.1L163.4 172.9L160.6 172.4L160.1 175.2L159.2 172.5L156.5 173.5L158.4 171.3L156.2 169.5L159.0 170.0L159.5 167.2L160.4 169.9Z' fill='%23fff' opacity='0.98'/%3E%3Cpath d='M162.6 78.7L162.5 80.8L164.5 80.9L162.7 81.8L163.6 83.7L161.9 82.5L160.8 84.3L160.9 82.2L158.9 82.1L160.7 81.2L159.8 79.3L161.5 80.5Z' fill='%23fff' opacity='0.72'/%3E%3Cpath d='M8.0 19.1L22.6 19.1M14.6 19.1L17.7 15.2M14.6 19.1L17.7 23.0M18.5 19.1L20.5 16.6M18.5 19.1L20.5 21.6M8.0 19.1L15.3 31.7M11.3 24.8L16.2 25.5M11.3 24.8L9.5 29.4M13.3 28.2L16.4 28.7M13.3 28.2L12.1 31.2M8.0 19.1L0.7 31.7M4.7 24.8L6.5 29.4M4.7 24.8L-0.2 25.5M2.7 28.2L3.9 31.2M2.7 28.2L-0.4 28.7M8.0 19.1L-6.6 19.1M1.4 19.1L-1.7 23.0M1.4 19.1L-1.7 15.2M-2.5 19.1L-4.5 21.6M-2.5 19.1L-4.5 16.6M8.0 19.1L0.7 6.5M4.7 13.4L-0.2 12.7M4.7 13.4L6.5 8.8M2.7 10.0L-0.4 9.5M2.7 10.0L3.9 7.0M8.0 19.1L15.3 6.5M11.3 13.4L9.5 8.8M11.3 13.4L16.2 12.7M13.3 10.0L12.1 7.0M13.3 10.0L16.4 9.5' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' opacity='0.56'/%3E%3Ccircle cx='74.8' cy='191.5' r='1.4' fill='%23fff' opacity='0.97'/%3E%3Cpath d='M133.8 66.8L131.1 69.9L134.2 72.6L130.2 71.7L129.4 75.8L128.1 71.9L124.2 73.2L126.9 70.1L123.8 67.4L127.8 68.3L128.6 64.2L129.9 68.1Z' fill='%23fff' opacity='0.89'/%3E%3Ccircle cx='117.6' cy='167.7' r='1.5' fill='%23fff' opacity='0.74'/%3E%3Ccircle cx='69.7' cy='199.8' r='2.7' fill='%23fff' opacity='0.93'/%3E%3Cpath d='M149.0 173.0L149.8 177.7L154.5 176.9L150.8 179.9L153.9 183.6L149.4 181.9L147.8 186.4L147.0 181.7L142.3 182.5L146.0 179.5L142.9 175.8L147.4 177.5Z' fill='%23fff' opacity='0.6'/%3E%3Cpath d='M20.5 104.9L27.6 104.9M23.7 104.9L25.2 103.0M23.7 104.9L25.2 106.8M25.6 104.9L26.6 103.7M25.6 104.9L26.6 106.1M20.5 104.9L24.1 111.0M22.1 107.7L24.5 108.0M22.1 107.7L21.2 109.9M23.1 109.3L24.6 109.6M23.1 109.3L22.5 110.8M20.5 104.9L17.0 111.0M18.9 107.7L19.8 109.9M18.9 107.7L16.5 108.0M17.9 109.3L18.5 110.8M17.9 109.3L16.4 109.6M20.5 104.9L13.4 104.9M17.3 104.9L15.8 106.8M17.3 104.9L15.8 103.0M15.4 104.9L14.4 106.1M15.4 104.9L14.4 103.7M20.5 104.9L16.9 98.8M18.9 102.1L16.5 101.8M18.9 102.1L19.8 99.9M17.9 100.5L16.4 100.2M17.9 100.5L18.5 99.0M20.5 104.9L24.0 98.8M22.1 102.1L21.2 99.9M22.1 102.1L24.5 101.8M23.1 100.5L22.5 99.0M23.1 100.5L24.6 100.2' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' opacity='0.95'/%3E%3Cpath d='M187.4 191.2L195.2 191.2M190.9 191.2L192.6 189.1M190.9 191.2L192.6 193.3M193.0 191.2L194.1 189.9M193.0 191.2L194.1 192.5M187.4 191.2L191.3 198.0M189.2 194.2L191.8 194.6M189.2 194.2L188.2 196.7M190.2 196.1L191.9 196.3M190.2 196.1L189.6 197.7M187.4 191.2L183.5 198.0M185.6 194.2L186.6 196.7M185.6 194.2L183.0 194.6M184.6 196.1L185.2 197.7M184.6 196.1L182.9 196.3M187.4 191.2L179.6 191.2M183.9 191.2L182.2 193.3M183.9 191.2L182.2 189.1M181.8 191.2L180.7 192.5M181.8 191.2L180.7 189.9M187.4 191.2L183.5 184.4M185.6 188.2L183.0 187.8M185.6 188.2L186.6 185.7M184.6 186.3L182.9 186.1M184.6 186.3L185.2 184.7M187.4 191.2L191.3 184.4M189.2 188.2L188.2 185.7M189.2 188.2L191.8 187.8M190.2 186.3L189.6 184.7M190.2 186.3L191.9 186.1' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' opacity='0.72'/%3E%3Cpath d='M126.7 91.1L127.4 94.0L130.3 93.3L128.1 95.3L130.2 97.5L127.3 96.6L126.5 99.5L125.8 96.6L122.9 97.3L125.1 95.3L123.0 93.1L125.9 94.0Z' fill='%23fff' opacity='0.81'/%3E%3Cpath d='M32.6 16.8L40.8 16.8M36.3 16.8L38.0 14.6M36.3 16.8L38.0 19.0M38.5 16.8L39.6 15.4M38.5 16.8L39.6 18.2M32.6 16.8L36.7 23.9M34.4 20.0L37.2 20.4M34.4 20.0L33.4 22.6M35.6 21.9L37.3 22.2M35.6 21.9L34.9 23.6M32.6 16.8L28.5 23.9M30.8 20.0L31.8 22.6M30.8 20.0L28.0 20.4M29.6 21.9L30.3 23.6M29.6 21.9L27.9 22.2M32.6 16.8L24.4 16.8M28.9 16.8L27.2 19.0M28.9 16.8L27.2 14.6M26.7 16.8L25.6 18.2M26.7 16.8L25.6 15.4M32.6 16.8L28.5 9.7M30.8 13.6L28.0 13.2M30.8 13.6L31.8 11.0M29.6 11.7L27.9 11.4M29.6 11.7L30.3 10.0M32.6 16.8L36.7 9.7M34.4 13.6L33.4 11.0M34.4 13.6L37.2 13.2M35.6 11.7L34.9 10.0M35.6 11.7L37.3 11.4' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' opacity='0.65'/%3E%3Ccircle cx='66.1' cy='22.7' r='1.0' fill='%23fff' opacity='0.55'/%3E%3Cpath d='M91.9 187.6L89.8 190.4L92.7 192.5L89.2 192.1L88.8 195.5L87.5 192.3L84.3 193.8L86.4 191.0L83.5 188.9L87.0 189.3L87.4 185.9L88.7 189.1Z' fill='%23fff' opacity='0.92'/%3E%3Ccircle cx='63.8' cy='152.6' r='2.0' fill='%23fff' opacity='0.97'/%3E%3Cpath d='M32.2 5.2L32.9 8.8L36.4 8.1L33.6 10.5L36.0 13.2L32.6 12.0L31.4 15.4L30.7 11.8L27.2 12.5L30.0 10.1L27.6 7.4L31.0 8.6Z' fill='%23fff' opacity='0.81'/%3E%3Cpath d='M61.6 137.9L61.7 142.9L66.7 142.7L62.5 145.3L65.1 149.5L60.7 147.1L58.4 151.5L58.3 146.5L53.3 146.7L57.5 144.1L54.9 139.9L59.3 142.3Z' fill='%23fff' opacity='0.53'/%3E%3Cpath d='M164.7 117.5L164.7 119.3L166.6 119.3L165.0 120.2L166.0 121.8L164.4 120.9L163.5 122.5L163.5 120.7L161.6 120.7L163.2 119.8L162.2 118.2L163.8 119.1Z' fill='%23fff' opacity='0.92'/%3E%3Cpath d='M115.2 158.5L138.6 158.5M125.7 158.5L130.7 152.3M125.7 158.5L130.7 164.7M132.0 158.5L135.2 154.5M132.0 158.5L135.2 162.5M115.2 158.5L126.9 178.8M120.5 167.6L128.3 168.8M120.5 167.6L117.5 175.0M123.6 173.1L128.7 173.8M123.6 173.1L121.7 177.9M115.2 158.5L103.5 178.8M109.9 167.6L112.9 175.0M109.9 167.6L102.1 168.8M106.8 173.1L108.7 177.9M106.8 173.1L101.7 173.8M115.2 158.5L91.8 158.5M104.7 158.5L99.7 164.7M104.7 158.5L99.7 152.3M98.4 158.5L95.2 162.5M98.4 158.5L95.2 154.5M115.2 158.5L103.5 138.2M109.9 149.4L102.1 148.2M109.9 149.4L112.9 142.0M106.8 143.9L101.7 143.2M106.8 143.9L108.7 139.1M115.2 158.5L126.9 138.2M120.5 149.4L117.5 142.0M120.5 149.4L128.3 148.2M123.6 143.9L121.7 139.1M123.6 143.9L128.7 143.2' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' opacity='0.62'/%3E%3Cpath d='M4.6 73.0L4.3 77.3L8.7 77.5L4.8 79.5L6.8 83.3L3.2 80.9L0.8 84.6L1.1 80.3L-3.3 80.1L0.6 78.1L-1.4 74.3L2.2 76.7Z' fill='%23fff' opacity='0.79'/%3E%3Cpath d='M53.5 43.4L52.1 48.5L57.2 49.8L52.1 51.1L53.5 56.2L49.8 52.5L46.1 56.2L47.5 51.1L42.4 49.8L47.5 48.5L46.1 43.4L49.8 47.1Z' fill='%23fff' opacity='0.77'/%3E%3Ccircle cx='55.2' cy='52.2' r='2.3' fill='%23fff' opacity='1'/%3E%3Cpath d='M181.0 50.4L197.1 50.4M188.2 50.4L191.6 46.1M188.2 50.4L191.6 54.7M192.6 50.4L194.8 47.6M192.6 50.4L194.8 53.2M181.0 50.4L189.1 64.3M184.6 56.7L190.0 57.5M184.6 56.7L182.6 61.8M186.8 60.4L190.3 61.0M186.8 60.4L185.5 63.7M181.0 50.4L172.9 64.3M177.4 56.7L179.4 61.8M177.4 56.7L172.0 57.5M175.2 60.4L176.5 63.7M175.2 60.4L171.7 61.0M181.0 50.4L164.9 50.4M173.8 50.4L170.4 54.7M173.8 50.4L170.4 46.1M169.4 50.4L167.2 53.2M169.4 50.4L167.2 47.6M181.0 50.4L172.9 36.5M177.4 44.1L172.0 43.3M177.4 44.1L179.4 39.0M175.2 40.4L171.7 39.8M175.2 40.4L176.5 37.1M181.0 50.4L189.0 36.5M184.6 44.1L182.6 39.0M184.6 44.1L190.0 43.3M186.8 40.4L185.5 37.1M186.8 40.4L190.3 39.8' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' opacity='0.84'/%3E%3Ccircle cx='97.4' cy='113.9' r='0.9' fill='%23fff' opacity='0.69'/%3E%3Cpath d='M53.4 106.1L62.4 106.1M57.4 106.1L59.4 103.7M57.4 106.1L59.4 108.5M59.9 106.1L61.1 104.5M59.9 106.1L61.1 107.7M53.4 106.1L57.9 113.9M55.4 109.6L58.5 110.1M55.4 109.6L54.3 112.5M56.6 111.7L58.6 112.0M56.6 111.7L55.9 113.6M53.4 106.1L48.9 113.9M51.4 109.6L52.5 112.5M51.4 109.6L48.3 110.1M50.2 111.7L50.9 113.6M50.2 111.7L48.2 112.0M53.4 106.1L44.4 106.1M49.4 106.1L47.4 108.5M49.4 106.1L47.4 103.7M46.9 106.1L45.7 107.7M46.9 106.1L45.7 104.5M53.4 106.1L48.9 98.3M51.4 102.6L48.3 102.1M51.4 102.6L52.5 99.7M50.2 100.5L48.2 100.2M50.2 100.5L50.9 98.6M53.4 106.1L57.9 98.3M55.4 102.6L54.3 99.7M55.4 102.6L58.5 102.1M56.6 100.5L55.9 98.6M56.6 100.5L58.6 100.2' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' opacity='0.7'/%3E%3Cpath d='M44.3 56.1L44.5 58.4L46.8 58.2L44.9 59.5L46.3 61.3L44.2 60.4L43.3 62.5L43.1 60.2L40.8 60.4L42.7 59.1L41.3 57.3L43.4 58.2Z' fill='%23fff' opacity='0.68'/%3E%3Cpath d='M10.3 24.9L9.2 27.4L11.7 28.5L9.0 28.8L9.3 31.4L7.7 29.3L5.5 30.9L6.6 28.4L4.1 27.3L6.8 27.0L6.5 24.4L8.1 26.5Z' fill='%23fff' opacity='0.75'/%3E%3Cpath d='M84.9 146.0L91.9 146.0M88.1 146.0L89.5 144.1M88.1 146.0L89.5 147.9M89.9 146.0L90.9 144.8M89.9 146.0L90.9 147.2M84.9 146.0L88.4 152.1M86.5 148.7L88.8 149.1M86.5 148.7L85.6 150.9M87.4 150.4L88.9 150.6M87.4 150.4L86.9 151.8M84.9 146.0L81.4 152.1M83.3 148.7L84.2 150.9M83.3 148.7L81.0 149.1M82.4 150.4L82.9 151.8M82.4 150.4L80.9 150.6M84.9 146.0L77.9 146.0M81.8 146.0L80.3 147.9M81.8 146.0L80.3 144.1M79.9 146.0L78.9 147.2M79.9 146.0L78.9 144.8M84.9 146.0L81.4 139.9M83.3 143.3L81.0 142.9M83.3 143.3L84.2 141.1M82.4 141.6L80.9 141.4M82.4 141.6L82.9 140.2M84.9 146.0L88.4 139.9M86.5 143.3L85.6 141.1M86.5 143.3L88.8 142.9M87.4 141.6L86.9 140.2M87.4 141.6L88.9 141.4' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' opacity='0.65'/%3E%3Ccircle cx='161.1' cy='135.3' r='2.1' fill='%23fff' opacity='0.59'/%3E%3Cpath d='M77.6 82.0L78.6 85.8L82.4 84.8L79.6 87.5L82.3 90.3L78.6 89.2L77.6 93.0L76.6 89.2L72.8 90.2L75.6 87.5L72.9 84.7L76.6 85.8Z' fill='%23fff' opacity='0.92'/%3E%3Ccircle cx='139.3' cy='103' r='1.8' fill='%23fff' opacity='0.59'/%3E%3Cpath d='M76.0 88.6L89.7 88.6M82.2 88.6L85.1 85.0M82.2 88.6L85.1 92.2M85.9 88.6L87.7 86.2M85.9 88.6L87.7 91.0M76.0 88.6L82.8 100.5M79.1 93.9L83.7 94.6M79.1 93.9L77.4 98.3M80.9 97.1L83.9 97.6M80.9 97.1L79.8 99.9M76.0 88.6L69.2 100.5M72.9 93.9L74.6 98.3M72.9 93.9L68.3 94.6M71.1 97.1L72.2 99.9M71.1 97.1L68.1 97.6M76.0 88.6L62.3 88.6M69.8 88.6L66.9 92.2M69.8 88.6L66.9 85.0M66.1 88.6L64.3 91.0M66.1 88.6L64.3 86.2M76.0 88.6L69.1 76.7M72.9 83.3L68.3 82.6M72.9 83.3L74.6 78.9M71.1 80.1L68.1 79.6M71.1 80.1L72.2 77.3M76.0 88.6L82.8 76.7M79.1 83.3L77.4 78.9M79.1 83.3L83.7 82.6M80.9 80.1L79.8 77.3M80.9 80.1L83.9 79.6' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' opacity='0.76'/%3E%3Cpath d='M10.1 168.0L25.5 168.0M17.0 168.0L20.3 163.9M17.0 168.0L20.3 172.1M21.2 168.0L23.3 165.3M21.2 168.0L23.3 170.7M10.1 168.0L17.8 181.3M13.6 174.0L18.7 174.8M13.6 174.0L11.6 178.9M15.6 177.6L19.0 178.1M15.6 177.6L14.4 180.8M10.1 168.0L2.4 181.3M6.6 174.0L8.6 178.9M6.6 174.0L1.5 174.8M4.6 177.6L5.8 180.8M4.6 177.6L1.2 178.1M10.1 168.0L-5.3 168.0M3.2 168.0L-0.1 172.1M3.2 168.0L-0.1 163.9M-1.0 168.0L-3.1 170.7M-1.0 168.0L-3.1 165.3M10.1 168.0L2.4 154.7M6.6 162.0L1.5 161.2M6.6 162.0L8.6 157.1M4.6 158.4L1.2 157.9M4.6 158.4L5.8 155.2M10.1 168.0L17.8 154.7M13.6 162.0L11.6 157.1M13.6 162.0L18.7 161.2M15.6 158.4L14.4 155.2M15.6 158.4L19.0 157.9' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' opacity='0.51'/%3E%3Cpath d='M100.6 116.8L99.8 118.6L101.7 119.5L99.6 119.7L99.8 121.7L98.6 120.0L97.0 121.2L97.8 119.4L95.9 118.5L98.0 118.3L97.8 116.3L99.0 118.0Z' fill='%23fff' opacity='0.73'/%3E%3Cpath d='M13.7 125.7L10.7 129.0L14.0 132.0L9.6 131.0L8.7 135.4L7.4 131.1L3.1 132.5L6.1 129.2L2.8 126.2L7.2 127.2L8.1 122.8L9.4 127.1Z' fill='%23fff' opacity='0.94'/%3E%3Cpath d='M20.3 72.3L18.1 76.6L22.5 78.7L17.6 79.0L18.0 83.8L15.3 79.8L11.3 82.5L13.5 78.2L9.1 76.1L14.0 75.8L13.6 71.0L16.3 75.0Z' fill='%23fff' opacity='0.9'/%3E%3Cpath d='M99.1 95.8L97.3 98.3L99.8 100.1L96.7 99.8L96.5 102.9L95.2 100.1L92.3 101.4L94.1 98.9L91.6 97.1L94.7 97.4L94.9 94.3L96.2 97.1Z' fill='%23fff' opacity='0.77'/%3E%3Cpath d='M123.0 158.0L130.0 158.0M126.2 158.0L127.6 156.1M126.2 158.0L127.6 159.9M128.0 158.0L129.0 156.8M128.0 158.0L129.0 159.2M123.0 158.0L126.5 164.1M124.6 160.7L126.9 161.1M124.6 160.7L123.7 162.9M125.5 162.4L127.0 162.6M125.5 162.4L125.0 163.8M123.0 158.0L119.5 164.1M121.4 160.7L122.3 162.9M121.4 160.7L119.1 161.1M120.5 162.4L121.0 163.8M120.5 162.4L119.0 162.6M123.0 158.0L116.0 158.0M119.8 158.0L118.4 159.9M119.8 158.0L118.4 156.1M118.0 158.0L117.0 159.2M118.0 158.0L117.0 156.8M123.0 158.0L119.5 151.9M121.4 155.3L119.1 154.9M121.4 155.3L122.3 153.1M120.5 153.6L119.0 153.4M120.5 153.6L121.0 152.2M123.0 158.0L126.5 151.9M124.6 155.3L123.7 153.1M124.6 155.3L126.9 154.9M125.5 153.6L125.0 152.2M125.5 153.6L127.0 153.4' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' opacity='0.57'/%3E%3Cpath d='M197.1 42.7L210.3 42.7M203.0 42.7L205.8 39.2M203.0 42.7L205.8 46.2M206.6 42.7L208.4 40.4M206.6 42.7L208.4 45.0M197.1 42.7L203.7 54.1M200.1 47.8L204.5 48.5M200.1 47.8L198.4 52.0M201.9 50.9L204.7 51.4M201.9 50.9L200.8 53.6M197.1 42.7L190.5 54.1M194.1 47.8L195.8 52.0M194.1 47.8L189.7 48.5M192.3 50.9L193.4 53.6M192.3 50.9L189.5 51.4M197.1 42.7L183.9 42.7M191.2 42.7L188.4 46.2M191.2 42.7L188.4 39.2M187.6 42.7L185.8 45.0M187.6 42.7L185.8 40.4M197.1 42.7L190.5 31.3M194.1 37.6L189.7 36.9M194.1 37.6L195.8 33.4M192.3 34.5L189.5 34.0M192.3 34.5L193.4 31.8M197.1 42.7L203.7 31.3M200.1 37.6L198.4 33.4M200.1 37.6L204.5 36.9M201.9 34.5L200.8 31.8M201.9 34.5L204.7 34.0' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' opacity='0.77'/%3E%3C/svg%3E");
--pc-field-7: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Ccircle cx='56.3' cy='147.2' r='5.8' fill='%23fff' opacity='0.46'/%3E%3Ccircle cx='75' cy='14.5' r='0.9' fill='%23fff' opacity='0.98'/%3E%3Ccircle cx='179.6' cy='159.6' r='3.8' fill='%23fff' opacity='0.89'/%3E%3Ccircle cx='47.1' cy='127.5' r='1.7' fill='%23fff' opacity='0.65'/%3E%3Ccircle cx='95.9' cy='197' r='0.9' fill='%23fff' opacity='0.5'/%3E%3Ccircle cx='153.9' cy='131.9' r='3.2' fill='%23fff' opacity='0.5'/%3E%3Ccircle cx='133.2' cy='99.3' r='4.6' fill='%23fff' opacity='0.51'/%3E%3Ccircle cx='162.1' cy='193.3' r='0.8' fill='%23fff' opacity='0.85'/%3E%3Ccircle cx='163.6' cy='94.1' r='2.8' fill='%23fff' opacity='0.97'/%3E%3Ccircle cx='17.4' cy='102.1' r='1.1' fill='%23fff' opacity='0.39'/%3E%3Ccircle cx='176.9' cy='147.3' r='1.4' fill='%23fff' opacity='0.71'/%3E%3Ccircle cx='10.6' cy='44.7' r='3.3' fill='%23fff' opacity='0.83'/%3E%3Ccircle cx='105.2' cy='133.2' r='0.8' fill='%23fff' opacity='0.43'/%3E%3Ccircle cx='199.6' cy='65.7' r='0.9' fill='%23fff' opacity='0.75'/%3E%3Ccircle cx='67.5' cy='60' r='0.9' fill='%23fff' opacity='0.37'/%3E%3Ccircle cx='146.9' cy='13' r='0.8' fill='%23fff' opacity='0.44'/%3E%3Ccircle cx='98.5' cy='8.8' r='6.3' fill='%23fff' opacity='0.75'/%3E%3Ccircle cx='41' cy='80' r='4.4' fill='%23fff' opacity='0.86'/%3E%3Ccircle cx='24.4' cy='196.8' r='0.8' fill='%23fff' opacity='0.85'/%3E%3Ccircle cx='153.7' cy='160.8' r='2.5' fill='%23fff' opacity='0.85'/%3E%3Ccircle cx='59.8' cy='39.8' r='0.9' fill='%23fff' opacity='0.4'/%3E%3Ccircle cx='167.4' cy='102.7' r='2.0' fill='%23fff' opacity='1'/%3E%3Ccircle cx='12.2' cy='16.1' r='1.7' fill='%23fff' opacity='0.97'/%3E%3Ccircle cx='27' cy='55.4' r='1.0' fill='%23fff' opacity='0.46'/%3E%3Ccircle cx='45.2' cy='126.6' r='5.3' fill='%23fff' opacity='0.43'/%3E%3Ccircle cx='66.7' cy='120.2' r='2.7' fill='%23fff' opacity='0.81'/%3E%3Ccircle cx='135.9' cy='54.5' r='1.2' fill='%23fff' opacity='0.75'/%3E%3Ccircle cx='94.6' cy='120.8' r='1.2' fill='%23fff' opacity='0.48'/%3E%3Ccircle cx='152.3' cy='31.9' r='1.0' fill='%23fff' opacity='0.75'/%3E%3Ccircle cx='145.7' cy='26.2' r='1.7' fill='%23fff' opacity='0.48'/%3E%3Ccircle cx='179.7' cy='70.9' r='0.9' fill='%23fff' opacity='0.46'/%3E%3Ccircle cx='129.1' cy='64' r='1.9' fill='%23fff' opacity='0.96'/%3E%3Ccircle cx='21.5' cy='183.8' r='1.0' fill='%23fff' opacity='0.55'/%3E%3Ccircle cx='79.3' cy='25.2' r='1.6' fill='%23fff' opacity='0.81'/%3E%3Ccircle cx='147.1' cy='184.3' r='1.1' fill='%23fff' opacity='0.97'/%3E%3Ccircle cx='27' cy='75.1' r='0.9' fill='%23fff' opacity='0.45'/%3E%3Ccircle cx='173.7' cy='52.5' r='1.8' fill='%23fff' opacity='0.96'/%3E%3Ccircle cx='105.8' cy='31' r='1.0' fill='%23fff' opacity='0.71'/%3E%3Ccircle cx='29.7' cy='48.7' r='3.4' fill='%23fff' opacity='0.71'/%3E%3Ccircle cx='110.6' cy='43.9' r='1.1' fill='%23fff' opacity='0.57'/%3E%3Ccircle cx='162.1' cy='93.7' r='1.1' fill='%23fff' opacity='0.64'/%3E%3Ccircle cx='198.1' cy='34.4' r='1.4' fill='%23fff' opacity='0.99'/%3E%3C/svg%3E");
--pc-field-8: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Ccircle cx='51.3' cy='175.3' r='0.8' fill='%23fff' opacity='0.44'/%3E%3Ccircle cx='171.5' cy='181.7' r='1.2' fill='%23fff' opacity='0.77'/%3E%3Ccircle cx='154.4' cy='97.8' r='1.1' fill='%23fff' opacity='0.45'/%3E%3Ccircle cx='51.1' cy='42.9' r='1.7' fill='%23fff' opacity='0.77'/%3E%3Ccircle cx='58.2' cy='136' r='4.0' fill='%23fff' opacity='0.37'/%3E%3Ccircle cx='5.1' cy='114' r='2.0' fill='%23fff' opacity='0.78'/%3E%3Ccircle cx='131' cy='69.4' r='4.7' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='185.9' cy='11.3' r='1.6' fill='%23fff' opacity='0.66'/%3E%3Ccircle cx='85.5' cy='159.8' r='6.7' fill='%23fff' opacity='0.96'/%3E%3Ccircle cx='143' cy='174.5' r='1.7' fill='%23fff' opacity='0.85'/%3E%3Ccircle cx='28.5' cy='172.8' r='0.8' fill='%23fff' opacity='0.46'/%3E%3Ccircle cx='197.8' cy='127.8' r='2.7' fill='%23fff' opacity='0.92'/%3E%3Ccircle cx='7.7' cy='80.5' r='4.9' fill='%23fff' opacity='0.73'/%3E%3Ccircle cx='84.7' cy='81.4' r='1.9' fill='%23fff' opacity='0.76'/%3E%3Ccircle cx='90' cy='190.8' r='1.0' fill='%23fff' opacity='0.74'/%3E%3Ccircle cx='84.4' cy='79.9' r='0.8' fill='%23fff' opacity='0.37'/%3E%3Cpath d='M97.0 59.7L98.5 65.2L104.0 66.7L98.5 68.2L97.0 73.7L95.5 68.2L90.0 66.7L95.5 65.2Z' fill='%23fff' opacity='0.78'/%3E%3Ccircle cx='108.5' cy='57.6' r='6.5' fill='%23fff' opacity='0.79'/%3E%3Ccircle cx='90.5' cy='107.1' r='2.2' fill='%23fff' opacity='0.67'/%3E%3Ccircle cx='74.3' cy='112.7' r='6.8' fill='%23fff' opacity='0.56'/%3E%3Ccircle cx='199.5' cy='1.6' r='4.0' fill='%23fff' opacity='0.97'/%3E%3Ccircle cx='176.2' cy='57.3' r='2.9' fill='%23fff' opacity='0.71'/%3E%3Ccircle cx='84.2' cy='137.5' r='4.4' fill='%23fff' opacity='0.37'/%3E%3Ccircle cx='143.1' cy='81.6' r='6.0' fill='%23fff' opacity='0.56'/%3E%3Ccircle cx='103.1' cy='20.3' r='0.8' fill='%23fff' opacity='0.82'/%3E%3Ccircle cx='147.8' cy='73.1' r='2.6' fill='%23fff' opacity='0.71'/%3E%3Ccircle cx='151.9' cy='102.6' r='0.9' fill='%23fff' opacity='0.54'/%3E%3Cpath d='M26.3 179.5L27.8 185.0L33.3 186.5L27.8 188.0L26.3 193.5L24.8 188.0L19.3 186.5L24.8 185.0Z' fill='%23fff' opacity='0.36'/%3E%3Ccircle cx='91.3' cy='159.8' r='0.8' fill='%23fff' opacity='0.83'/%3E%3Cpath d='M37.2 122.3L38.6 127.4L43.7 128.8L38.6 130.2L37.2 135.3L35.8 130.2L30.7 128.8L35.8 127.4Z' fill='%23fff' opacity='0.95'/%3E%3C/svg%3E");
}
.pc-reveal-root {
position: fixed;
inset: 0;
z-index: 2147483647;
background: radial-gradient(125% 95% at 50% 20%, #191b3d 0%, #0b0b19 52%, #06070d 100%);
color: #f4f4f8;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
overflow: hidden;
--pc-tier-color: #3e7bfa;
--pc-tier-color-to: #3e7bfa;
--pc-tier-glow: #3e7bfa;
/* Text sitting ON the tier fill, not beside it — the animation driver
overwrites this per tier (see its `tierInk`). The default matches the
default tier colour's own pick so the badge is readable for the one
frame before setTier lands. */
--pc-tier-ink: #f4f4f8;
--pc-charge: 0;
/* The one measure the prize beat is built from — and the materialize beat
before it, which has to match the prize card's size and proportion
exactly or the crossfade between them reads as a jump. Declared on the
root (not on .pc-prize) for precisely that reason: both phases need it.
The vh term is what keeps the whole prize stack on screen in a short
viewport (the admin theme editor's preview frame included) with no
media query. */
--pc-card-w: min(300px, 66vw, 30vh);
/* Swelled to 1 under the burst so the ambient mote field erupts with
everything else instead of drifting calmly through the loudest beat. */
--pc-star-energy: 0;
/* Rarium's own face (DESIGN.md) — the reveal's display voice, loaded by
the page shell with a system fallback. Body copy stays on the system
stack: a swap-in flash on a 12px note is a cost with no payoff. */
--pc-display: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* ---------------------------------------------------------------- stage */
.pc-stage {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
/* The backdrop plate. Inset negative so the slow ken-burns drift never
exposes an edge; it is a room, not a subject, so its exposure and its share
of the tier hue are both set from the catalog (see the two blocks below).
The overscan and the drift's zoom range are both deliberately SMALL. They
used to be -8% inset with a 1.04→1.16 scale, which meant the plate was
never shown at less than 1.21x — a merchant picking a scene by its
thumbnail got about two thirds of its area, before `cover` had even
cropped for the viewport's aspect. At -2.5% and 1.0→1.06 the beat opens on
essentially the whole plate and the drift is still clearly a drift.
The plate image arrives as a custom property the player sets from the
shop's chosen backdrop (applyStage), NOT as a rule per catalog entry. That
was fine at seven plates; at 67 and growing it would be a stylesheet every
buyer downloads carrying 67 url()s to use one of them, and adding a plate
would mean editing a theme-extension asset. The URL is built server-side
from the closed catalog (backdropFile) so nothing merchant-typed ever
reaches a url(). */
.pc-stage-plate {
position: absolute;
inset: -2.5%;
/* No file fallback: the plate URL is always supplied by applyStage, and
naming a specific asset here is how a stylesheet ends up pointing at a
plate that has been retired from the catalog. With no image the root's
own gradient shows through, which is a clean degrade rather than a 404. */
background: var(--pc-stage-plate-image, none) center / cover no-repeat;
filter: saturate(var(--pc-plate-saturate, 1)) brightness(var(--pc-plate-brightness, 0.8))
contrast(1.06);
opacity: var(--pc-plate-opacity, 0.96);
transform-origin: 52% 62%;
animation: pc-plate-drift 48s ease-in-out infinite alternate;
}
/* Landscape fitting — the single biggest quality lever on the plate, and the
reason the library does not need landscape masters.
*
* `cover` scales by whichever axis needs more. Every plate is 2:3 PORTRAIT,
* so in a landscape viewport that axis is always the width, and a 1280-wide
* source stretched across a 2880px laptop is a 2.25x upscale — that is where
* the softness comes from. It is also the crop: at cover you see 100% of the
* plate's width and only 42% of its height.
*
* Fitting by HEIGHT instead fixes both at once. At 152% the plate spans about
* two thirds of the frame, upscales 1.5x instead of 2.25x, and shows 66% of
* the image instead of 42%. The remaining thirds are filled by
* `.pc-stage-fill` — the same image, blown up, heavily blurred and dimmed,
* which reads as depth of field rather than as letterboxing, and puts the
* sharp part of the plate exactly where the content column is.
*
* Phones keep `cover`: a portrait plate in a portrait viewport crops by width
* instead, which is only a 1.32x upscale and needs no fill. The min-height
* guard keeps a landscape PHONE on cover too — at 390px tall the fitted plate
* would be a narrow strip with blur either side. */
/* Declared BEFORE the media query that switches it on. Both rules are a
single class, so they carry identical specificity and source order is the
only thing separating them — with this block second, its `opacity: 0`
would win at every viewport and the fill would never appear. */
.pc-stage-fill {
position: absolute;
inset: 0;
background: var(--pc-stage-plate-image, none) center / cover no-repeat;
/* Scaled past the edges because a large blur samples transparent pixels
beyond its own box and would otherwise fade out at the frame edge. */
transform: scale(1.15);
/* Static on purpose: the plate's ken-burns drift is a transform
(composited, free), but blurring a full-screen layer every frame is not —
this one is painted once. */
filter: blur(48px) saturate(0.55) brightness(0.32);
opacity: 0;
}
@media (orientation: landscape) and (min-width: 900px) and (min-height: 520px) {
.pc-stage-plate {
/* The plate stops being a full-bleed box and becomes exactly the size of
the image, so the feather below lands on the IMAGE's own edges rather
than on the frame's — a mask on a full-bleed box would fade the frame
edges and leave the seam in the middle untouched.
vh is exact here rather than approximate: .pc-reveal-root is
position:fixed/inset:0, so the stage IS the viewport.
Centred with margins, not a transform, because the ken-burns drift
already owns `transform` and a second one would replace it. */
--pc-plate-h: var(--pc-plate-fit, 152vh);
inset: auto;
top: 50%;
left: 50%;
height: var(--pc-plate-h);
/* 1280 / 1920 — the library's aspect ratio. */
width: calc(var(--pc-plate-h) * 0.66667);
margin-top: calc(var(--pc-plate-h) / -2);
margin-left: calc(var(--pc-plate-h) * -0.33333);
background-size: cover;
/* Feathered sides. Without this the plate meets the blurred fill on a
hard vertical line, which reads as a seam rather than as depth of
field — clearly visible on the pale plates, where a white edge sits
against a dimmed surround. */
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
}
.pc-stage-fill {
opacity: 1;
}
}
/* Plate exposure, by the measured luminance of the image itself (the
`lightness` field on every catalog entry, stamped here as
`data-pc-plate-light`). The reveal's text is a fixed near-white, so this
is a legibility control before it's a taste one: a white gallery plate
dropped in at scene exposure puts white text on white. Three buckets, not
a per-image number — a merchant can't tune this, so it only has to be
right, not precise.
The defaults above are the `mid` case; `dark` and `bright` move from it. */
.pc-reveal-root[data-pc-plate-light="dark"] {
/* Nothing to hold back — these plates are already darker than the scrim
would make them, so dimming further just throws away the artwork. */
--pc-plate-brightness: 0.98;
}
.pc-reveal-root[data-pc-plate-light="bright"] {
--pc-plate-brightness: 0.46;
--pc-plate-saturate: 0.9;
/* Paired with a heavier centre scrim below: brightness alone flattens a
pale plate into grey mud, while a gradient over it keeps the corners
bright and readable and only darkens under the text column. */
--pc-scrim-strength: 1.55;
}
/* Tier duotone strength, by the catalog's `tint` field.
`wash` is the original aurora treatment — abstract or near-monochrome
plates take a heavy duotone, so Base reads cool and Legendary reads molten
off one photograph. `scene` is a whisper: a merchant picks a castle town
because it looks like a castle town, and at 62% every scene read as "the
tier colour, with something behind it". There the tier tell is carried by
the rays, aura, card frame and plinth, all of which sit in the middle of
the frame where the eye already is. */
.pc-reveal-root[data-pc-plate-tint="wash"] {
--pc-plate-opacity: 0.55;
--pc-plate-saturate: 0.62;
--pc-tint-strength: 0.62;
}
.pc-reveal-root[data-pc-plate-tint="scene"] {
--pc-tint-strength: 0.12;
}
/* A bright plate stays a wash-strength duotone target only if the catalog
says so; when both apply, the exposure drop above still wins because it
sets brightness, and this only sets how much hue rides on top. */
.pc-reveal-root[data-pc-plate-light="bright"][data-pc-plate-tint="wash"] {
--pc-plate-opacity: 0.7;
}
/* Translations stay under the 2.5% the inset overhangs by, so no edge can
surface even at the un-zoomed end of the range. */
@keyframes pc-plate-drift {
from { transform: scale(1) translate3d(-0.9%, 0.9%, 0); }
to { transform: scale(1.06) translate3d(1.1%, -1.3%, 0); }
}
/* Duotone pass: keeps the plate's luminance detail but pulls its rainbow into
the tier's own hue, so Base reads cool-blue and Legendary reads molten off
the exact same photograph. */
.pc-stage-tint {
position: absolute;
inset: 0;
background: var(--pc-tier-color);
mix-blend-mode: color;
opacity: var(--pc-tint-strength, 0.62);
}
/* Rotating god-rays. Soft-stop conic repeats rather than hard-edged wedges —
hard stops need a blur filter to stop aliasing, and blurring an element
this large is the one thing here that would actually cost frames. */
.pc-stage-rays {
position: absolute;
left: 50%;
top: 44%;
width: 220vmax;
height: 220vmax;
transform: translate(-50%, -50%);
background: repeating-conic-gradient(
from 0deg,
rgba(255, 255, 255, 0) 0deg,
color-mix(in srgb, var(--pc-tier-glow) 85%, #ffffff) 3.2deg,
rgba(255, 255, 255, 0) 6.4deg,
rgba(255, 255, 255, 0) 14deg
);
-webkit-mask-image: radial-gradient(circle at center, transparent 3%, #000 16%, transparent 46%);
mask-image: radial-gradient(circle at center, transparent 3%, #000 16%, transparent 46%);
mix-blend-mode: screen;
opacity: 0.14;
animation: pc-rays-turn 120s linear infinite;
transition: opacity 0.6s ease-out;
}
@keyframes pc-rays-turn {
to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* The aura is the tier tell at room scale — it breathes at rest and swells
with the charge, so holding the crate visibly loads the whole screen. */
.pc-stage-aura {
position: absolute;
inset: 0;
background: radial-gradient(
closest-side circle at 50% 45%,
color-mix(in srgb, var(--pc-tier-glow) 52%, transparent),
transparent 72%
);
opacity: calc(0.3 + 0.45 * var(--pc-charge));
animation: pc-aura-breathe 7s ease-in-out infinite;
}
@keyframes pc-aura-breathe {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.09); }
}
/* rarium-starfield.js's drifting mote/glint field — the layer that makes
the stage read as air with something in it. Additive (screen) so motes add
light over the plate rather than punching grey dots into it. */
.pc-star-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
mix-blend-mode: screen;
}
/* Last stage layer. Its job is contrast under the CONTENT, which lives in a
column down the middle — so it darkens along the centre and lets the
scene stay visible out at the edges, rather than the other way round. The
old version crushed the corners to solid #05050c and threw away the part
of every backdrop a merchant can actually recognise: the architecture, the
treeline, the sky. Nothing reaches full black now. */
Every stop is scaled by --pc-scrim-strength so a pale plate (the `bright`
bucket above) can pull the centre column down far enough for white text
without the dark plates losing their artwork to a scrim they don't need. */
.pc-stage-vignette {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(5, 5, 12, 0) 0%,
rgba(5, 5, 12, calc(0.34 * var(--pc-scrim-strength, 1))) 26%,
rgba(5, 5, 12, calc(0.4 * var(--pc-scrim-strength, 1))) 50%,
rgba(5, 5, 12, calc(0.34 * var(--pc-scrim-strength, 1))) 74%,
rgba(5, 5, 12, 0) 100%
),
radial-gradient(
ellipse 150% 105% at 50% 45%,
rgba(5, 5, 12, 0) 34%,
rgba(5, 5, 12, calc(0.3 * var(--pc-scrim-strength, 1))) 74%,
rgba(5, 5, 12, calc(0.62 * var(--pc-scrim-strength, 1))) 100%
);
}
/* Per-phase stage intensity — one class on the root, set by showPhase, so
the room reacts to the beat instead of every phase sharing one still
backdrop. The prize beat is the loudest the rays ever get. */
.pc-reveal-root.pc-beat-burst .pc-stage-rays { opacity: 0.3; }
.pc-reveal-root.pc-beat-prize .pc-stage-rays { opacity: 0.26; animation-duration: 70s; }
.pc-reveal-root.pc-beat-prize .pc-stage-aura { opacity: 0.5; }
/* Absolutely positioned (not flow-laid-out) so two phases can overlap during
a crossfade (crossfadePhases in rarium-reveal-player.js) — with only
one .pc-active at a time (every other transition), this looks identical
to the old flow-positioned version, just centered within its own box
instead of by the root's flex layout. */
.pc-phase {
display: none;
position: absolute;
inset: 0;
z-index: 1;
align-items: center;
/* `safe center`, not plain center: the prize beat's stack is the tallest
thing here, and on a genuinely short viewport (the admin theme editor's
preview frame on a small laptop is the real case) plain centering
overflows in BOTH directions — the headline slides up under the
mute/skip chrome. Safe centering pins it to the start instead — declared
twice on purpose, since a browser that doesn't know the `safe` keyword
drops the whole declaration and would otherwise fall back to
flex-start (every phase top-aligned), not to plain centering.
`overflow: hidden` rather than `auto` because the decorative bleed
(.pc-prize-rays is 2.6x the card, .pc-prize-glow overhangs it) would
otherwise give this a scrollbar and hundreds of pixels of scrollable
nothing; the short-viewport rules at the end of this file are what keep
real content inside the box. */
justify-content: center;
justify-content: safe center;
overflow: hidden;
flex-direction: column;
text-align: center;
/* Extra bottom clearance: .pc-disclaimer-reveal is pinned to the bottom
of the viewport (.pc-reveal-root's own containing block, not this
phase), with no clearance reserved for it otherwise — on shorter
viewports the afterglow Share/Replay buttons (or anything else near a
phase's bottom) could render underneath it. The 60px of top padding is
the matching clearance for the mute/skip chrome pinned to the top
corners — without it the prize headline runs into them on a short
viewport. */
padding: 56px 24px 46px;
box-sizing: border-box;
}
.pc-phase.pc-active {
display: flex;
}
/* -------------------------------------------------------- phase 0 arrival */
/* A slowly turning rune ring rather than a plain outlined circle: two
counter-rotating tick rings around a pulsing core, which is the same
sigil vocabulary the anticipation beat then blooms into. */
.pc-seal {
position: relative;
width: 116px;
height: 116px;
}
.pc-seal::before,
.pc-seal::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: repeating-conic-gradient(
from 0deg,
var(--pc-tier-glow) 0deg 1.4deg,
transparent 1.4deg 10deg
);
-webkit-mask-image: radial-gradient(circle, transparent 46%, #000 48%, #000 50%, transparent 52%);
mask-image: radial-gradient(circle, transparent 46%, #000 48%, #000 50%, transparent 52%);
animation: pc-sigil-turn 18s linear infinite;
}
.pc-seal::after {
inset: 18px;
animation-duration: 11s;
animation-direction: reverse;
opacity: 0.7;
}
@keyframes pc-sigil-turn {
to { transform: rotate(360deg); }
}
.pc-arrival-text {
margin-top: 26px;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(244, 244, 248, 0.72);
animation: pc-arrival-pulse 2.4s ease-in-out infinite;
}
@keyframes pc-arrival-pulse {
0%, 100% { opacity: 0.55; }
50% { opacity: 1; }
}
/* ------------------------------------------- phase 1/2 anticipation + crack */
.pc-box-stage {
position: relative;
width: min(300px, 78vw);
height: min(300px, 78vw);
display: flex;
align-items: center;
justify-content: center;
touch-action: none;
cursor: pointer;
}
.pc-box-stage:focus-visible {
outline: 2px solid #fff;
outline-offset: 6px;
border-radius: 24px;
}
/* The summoning circle the crate floats above (reference: the rune platform
under a revealed card). Two counter-rotating tick rings plus a solid inner
hairline, all masked to thin annuli — the whole thing brightens and grows
with --pc-charge, so the buyer sees the hold doing something beyond the
progress bar. */
.pc-sigil {
position: absolute;
inset: 0;
pointer-events: none;
opacity: calc(0.4 + 0.6 * var(--pc-charge));
transform: scale(calc(1 + 0.08 * var(--pc-charge)));
transition: opacity 0.12s linear, transform 0.12s linear;
}
.pc-sigil-ring {
position: absolute;
inset: 0;
border-radius: 50%;
background: repeating-conic-gradient(
from 0deg,
var(--pc-tier-color-to) 0deg 1.1deg,
transparent 1.1deg 7.5deg
);
-webkit-mask-image: radial-gradient(circle, transparent 47%, #000 49%, #000 50.5%, transparent 52.5%);
mask-image: radial-gradient(circle, transparent 47%, #000 49%, #000 50.5%, transparent 52.5%);
animation: pc-sigil-turn 26s linear infinite;
}
.pc-sigil-ring--inner {
inset: 11%;
background: repeating-conic-gradient(
from 0deg,
var(--pc-tier-glow) 0deg 3.4deg,
transparent 3.4deg 26deg
);
animation-duration: 15s;
animation-direction: reverse;
}
.pc-sigil-ring--hair {
inset: 19%;
background: var(--pc-tier-glow);
-webkit-mask-image: radial-gradient(circle, transparent 48.5%, #000 50%, transparent 51.5%);
mask-image: radial-gradient(circle, transparent 48.5%, #000 50%, transparent 51.5%);
opacity: 0.55;
animation: none;
}
.pc-box-visual {
position: relative;
width: 160px;
height: 160px;
/* No flat fill, no radius, no box-shadow — the energy-ball canvas nested
inside paints the visual. A `box-shadow` glow used to live here and drew
the one thing this beat must not have: a hard rounded-rectangle EDGE
around a ball of plasma. The bloom is a radial gradient on ::before
instead, which has no shape of its own to give away.
overflow: visible so the plasma/tendril bloom can extend past this
160px box; the canvas itself is capped at the stage's own size so
nothing spills into the hold-hint text below. */
overflow: visible;
animation: pc-idle-float 5.4s ease-in-out infinite;
}
.pc-box-visual::before {
content: "";
position: absolute;
inset: -55%;
border-radius: 50%;
background: radial-gradient(
circle at center,
color-mix(in srgb, var(--pc-tier-glow) 70%, transparent) 0%,
color-mix(in srgb, var(--pc-tier-glow) 22%, transparent) 38%,
transparent 68%
);
opacity: calc(0.35 + 0.65 * var(--pc-charge));
transform: scale(calc(1 + 0.35 * var(--pc-charge)));
transition: opacity 0.1s linear, transform 0.1s linear;
pointer-events: none;
}
/* rarium-energy-ball.js's runEnergyBallAmbient draws here every hold
frame. Sized to the box-stage (not the smaller box-visual) so the plasma
core, curling tendrils and rim rays have room to bloom without clipping;
riding inside .pc-box-visual means it still gets carried along by that
element's own shake/crack transforms for free. screen blend keeps
overlapping glow additive against the dark stage instead of muddying it. */
.pc-energy-canvas {
position: absolute;
top: 50%;
left: 50%;
width: min(300px, 78vw);
height: min(300px, 78vw);
transform: translate(-50%, -50%);
pointer-events: none;
mix-blend-mode: screen;
}
/* Float, not just breathe — a vertical bob reads as "suspended in the air
above the circle", which a pure scale pulse never did. */
@keyframes pc-idle-float {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-9px) scale(1.04); }
}
/* Same pattern as the product-page teaser's .pc-charge-track/-fill
(rarium-box.css) — driven by the same --pc-charge custom property the
AnimationDriver already writes onto .pc-reveal-root every hold frame. */
.pc-charge-track {
position: relative;
width: 168px;
height: 6px;
margin-top: 22px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.1);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
overflow: hidden;
opacity: calc(0.3 + 0.7 * var(--pc-charge));
}
/* scaleX, not an animated `width` (which is what the product-page teaser's
otherwise-identical fill still uses): this one runs during the crate beat,
the frame budget now also paying for the mote field, the aura and the
energy ball's own rAF loop — and a transform stays off the layout path
entirely. Inside a 6px `overflow: hidden` pill the squashed end radius is
not perceptible. */
.pc-charge-fill {
display: block;
height: 100%;
width: 100%;
transform: scaleX(var(--pc-charge));
transform-origin: left center;
border-radius: 999px;
background: linear-gradient(90deg, var(--pc-tier-color), var(--pc-tier-color-to));
box-shadow: 0 0 12px var(--pc-tier-glow);
transition: transform 0.08s linear;
}
/*
* The AnimationDriver is constructed against .pc-reveal-root (so tier CSS
* vars inherit to every phase — burst, prize card — not just the box). Its
* trigger classes therefore land on the root too; scope the actual keyframe
* to the box visual via a descendant selector so only the box moves, not the
* whole screen. animationend still bubbles from the box up to root, where
* the driver's listener lives.
*/
.pc-reveal-root.pc-anim-shake .pc-box-visual {
animation: pc-shake 0.4s ease-in-out !important;
}
@keyframes pc-shake {
0%, 100% { transform: translateX(0) rotate(0deg); }
20% { transform: translateX(-6px) rotate(-3deg); }
40% { transform: translateX(6px) rotate(3deg); }
60% { transform: translateX(-4px) rotate(-2deg); }
80% { transform: translateX(4px) rotate(2deg); }
}
.pc-reveal-root.pc-anim-crack .pc-box-visual {
animation: pc-crack 0.6s ease-out forwards !important;
}
@keyframes pc-crack {
0% { transform: scale(1); opacity: 1; }
60% { transform: scale(1.15); }
100% { transform: scale(1.4); opacity: 0; }
}
.pc-hold-hint {
margin-top: 26px;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(244, 244, 248, 0.8);
/* Fades out as the charge fills — by the time the crate cracks, the
instruction has done its job and stops competing with the crate. */
opacity: calc(1 - 0.75 * var(--pc-charge));
}
/* ---------------------------------------------- opening gesture + its vessel
The buyer's own moment (@rarium/reveal-engine's StageTrigger, wired in
rarium-triggers.js). Everything below keys off `data-pc-trigger` on the
reveal root and off `--pc-charge`, which every gesture publishes through the
driver — so the stylesheet never needs to know WHICH gesture is running,
only how far along it is.
Nothing here is conditional on the gesture except what the crate IS: hold,
tap and instant all act on the energy orb, and rip acts on a foil pack,
because a tear needs something with a seam. */
/* Only "instant" has nothing to press. */
.pc-reveal-root[data-pc-trigger="instant"] .pc-box-stage {
cursor: default;
}
/* The rip's drag is horizontal and long; `ew-resize` is the one cursor that
says "this is a thing you pull sideways" without a custom asset. */
.pc-reveal-root[data-pc-trigger="rip"] .pc-box-stage {
cursor: ew-resize;
}
/* ------------------------------------------------------------- the foil pack
Shown only for the rip. Drawn rather than shipped as an image for the same
reason the burst effects are: its LIGHT has to take the shop's tier colour
as it climbs, and a photograph cannot. The foil itself is fixed. */
.pc-pack {
position: absolute;
inset: 0;
display: none;
align-items: center;
justify-content: center;
}
.pc-reveal-root[data-pc-vessel="pack"] .pc-pack {
display: flex;
}
/* The orb and its bloom are the OTHER vessel, so they are hidden for every
vessel that is NOT the orb.
Written as an exclusion on purpose. It used to be one opt-out rule per
vessel — pack, then box — and adding the capsule and the ribbon box did not
add theirs, so the orb's plasma canvas kept running underneath them. It is
300px square with `mix-blend-mode: screen`, which over a crate is not a
subtle bug: it painted a hard edged white plane across the whole stage the
moment the charge lit it. An allowlist of vessels that must remember to opt
out is a list that will be forgotten again. */
.pc-reveal-root[data-pc-vessel]:not([data-pc-vessel="orb"]) .pc-energy-canvas,
.pc-reveal-root[data-pc-vessel]:not([data-pc-vessel="orb"]) .pc-box-visual::before {
display: none;
}
.pc-pack-body {
position: relative;
width: 116px;
height: 156px;
border-radius: 7px;
overflow: hidden;
/* Foil, not plastic: a steep off-axis gradient with a hard highlight band
through it is what separates the two, and it costs one background.
GRAPHITE, never the tier colour (the rarity climb, 2026-09-19): the pack
is the same on every pull, and the model it stands in for is authored
graphite (PC_Skin). The tier lives in the light below, the halo that
grows with the charge and the tear, which climb with it. */
background:
linear-gradient(
118deg,
#14141c 0%,
#1c1d25 34%,
#2a2b35 48%,
#12121a 62%,
#181920 100%
);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.09),
0 18px 34px rgba(0, 0, 0, 0.55),
0 0 calc(18px + 26px * var(--pc-charge)) var(--pc-tier-glow);
/* Leans toward the pull as the tear travels — the pack giving, rather than
the tear being drawn on top of a pack that stays rigid. */
transform: rotate(calc(-1.5deg + 2.5deg * var(--pc-charge)));
transition: transform 0.1s linear;
}
/* A highlight travelling across the foil, forever. It is what stops the pack
reading as a flat dark rectangle while the buyer decides what to do. */
.pc-pack-sheen {
position: absolute;
inset: -40%;
background: linear-gradient(
100deg,
transparent 38%,
rgba(255, 255, 255, 0.26) 47%,
rgba(255, 255, 255, 0.06) 52%,
transparent 60%
);
animation: pc-pack-sheen 4.2s ease-in-out infinite;
}
@keyframes pc-pack-sheen {
0%, 100% { transform: translateX(-34%); }
50% { transform: translateX(34%); }
}
.pc-pack-mark {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.6rem;
font-weight: 800;
color: rgba(244, 244, 248, 0.16);
text-shadow: 0 0 22px var(--pc-tier-glow);
}
/* The crimped strip above the seam, which is the part that comes away. Hinged
at its left edge because that is where the tear starts, so it peels in the
same direction the finger is travelling. */
.pc-pack-lid {
position: absolute;
top: calc(50% - 78px);
left: calc(50% - 58px);
width: 116px;
height: 30px;
border-radius: 7px 7px 2px 2px;
background:
repeating-linear-gradient(
90deg,
rgba(255, 255, 255, 0.14) 0 2px,
transparent 2px 6px
),
linear-gradient(160deg, #23232f, #101018);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
transform-origin: left bottom;
transform:
rotate(calc(-18deg * var(--pc-charge)))
translate(calc(7px * var(--pc-charge)), calc(-13px * var(--pc-charge)));
opacity: calc(1 - 0.5 * var(--pc-charge));
transition: transform 0.1s linear, opacity 0.1s linear;
}
/* The gap the lid leaves, and the light coming out of it. Scales from the left
so the opening tracks the finger rather than growing from the middle. */
.pc-pack-tear {
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 58px);
width: 116px;
height: 6px;
border-radius: 3px;
transform: scaleX(var(--pc-charge));
transform-origin: left center;
background: linear-gradient(90deg, var(--pc-tier-color), var(--pc-tier-color-to));
box-shadow: 0 0 16px var(--pc-tier-glow);
transition: transform 0.08s linear;
}
.pc-pack-tear::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 84px;
margin-top: -42px;
background: radial-gradient(ellipse at 50% 50%, var(--pc-tier-glow), transparent 66%);
opacity: calc(0.75 * var(--pc-charge));
filter: blur(6px);
}
/* The affordance: where to put the finger and which way to go. Travels with
the tear and fades out as it goes, because by the time the pack is half open
the buyer no longer needs telling. */
/* Only under the rip. The grip says "put your finger here and go right",
which is a lie on a pack the buyer is meant to tap — the vessel can take
more than one gesture, so its affordance has to be keyed to the gesture
rather than to the object it sits on. */
.pc-pack-grip {
display: none;
position: absolute;
/* Placed against the MODEL, not the CSS packet it sits inside: the 3D pack
is the taller of the two and its tear line runs well above the middle of
the stage. Travel matches the model's width so the grip arrives at the far
corner exactly as the last strip lets go.
Derived from the rendered silhouette rather than guessed — the pack fills
87% of the 380px canvas and its tear line sits 86.5% of the way up it. */
top: calc(50% - 130px);
left: calc(50% - 110px);
width: 22px;
height: 22px;
z-index: 3;
opacity: calc(1 - var(--pc-charge));
transform: translateX(calc(190px * var(--pc-charge)));
transition: transform 0.08s linear, opacity 0.12s linear;
}
.pc-reveal-root[data-pc-trigger="rip"] .pc-pack-grip {
display: block;
}
.pc-pack-grip::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: #f4f4f8;
box-shadow: 0 0 14px var(--pc-tier-glow);
/* A short bob toward the tear, on the inner element so it composes with the
outer's charge-driven travel instead of fighting it. */
animation: pc-grip-beckon 1.8s ease-in-out infinite;
}
/* The chevron, drawn with two borders rather than an icon font or an SVG the
theme extension would have to ship and cache-bust. */
.pc-pack-grip::after {
content: "";
position: absolute;
top: 7px;
left: 6px;
width: 7px;
height: 7px;
border-top: 2px solid #14141c;
border-right: 2px solid #14141c;
--pc-grip-rotate: 45deg;
animation: pc-grip-beckon 1.8s ease-in-out infinite;
}
@keyframes pc-grip-beckon {
0%, 62%, 100% { transform: translateX(0) rotate(var(--pc-grip-rotate, 0deg)); }
80% { transform: translateX(5px) rotate(var(--pc-grip-rotate, 0deg)); }
}
/* ------------------------------------------------------ the 3D vessel canvas
rarium-vessel.js mounts a WebGL canvas here once the model has loaded. It
replaced a stack of seven flat images positioned from a manifest: that could
fake a lid rotating but never turn one through perspective, never reveal an
interior with depth, and never let escaping light land on the underside of
the panel it escaped past.
There is almost nothing to style. Everything the crate does — the opening,
the light, the float, the parallax — happens inside the canvas, driven by
`--pc-charge`, which the renderer reads per frame. This is only where the
canvas sits.
Hidden until the root agrees this is the vessel being shown: the renderer
stamps `data-pc-vessel-art` with the vessel's NAME, so the admin preview's
live bridge cannot leave one crate on screen after the merchant has picked
another. One show-rule per modelled vessel, which is explicit rather than
clever — CSS cannot compare two attributes for equality. */
.pc-vessel-canvas {
display: none;
position: absolute;
top: 50%;
left: 50%;
/* Larger than the 160px `.pc-box-visual` it lives in, and deliberately: the
crate's glow and its contact shadow both fall outside its silhouette, and
the renderer frames the model with headroom for exactly that. Raised from
320 alongside a tighter camera margin — both vessels were sitting small in
the middle of a much larger stage. */
width: 380px;
height: 380px;
margin: -190px 0 0 -190px;
/* Under the grips, which are affordances and have to stay findable — the
canvas is appended by the renderer, so in DOM order it would otherwise
paint over every positioned sibling that came before it, and the rip's
grip vanished behind the pack it is meant to point at. */
z-index: 1;
/* The parallax listens on the stage, not on the canvas — a crate is small
and a canvas that swallows pointer events would also swallow the gesture. */
pointer-events: none;
}
.pc-reveal-root[data-pc-vessel="pack"][data-pc-vessel-art="pack"] .pc-vessel-canvas,
.pc-reveal-root[data-pc-vessel="box"][data-pc-vessel-art="box"] .pc-vessel-canvas,
.pc-reveal-root[data-pc-vessel="capsule"][data-pc-vessel-art="capsule"] .pc-vessel-canvas,
.pc-reveal-root[data-pc-vessel="gift"][data-pc-vessel-art="gift"] .pc-vessel-canvas {
display: block;
}
/* ...and while the model is still being fetched, NOTHING stands in for it.
The player stamps `data-pc-vessel-pending` for the length of the load. The
CSS build used to show through that window and then be replaced the instant
the GLB parsed, so every reveal opened with a flat gradient packet that
swapped for a real one a beat later — the fallback announcing itself on the
happy path. It is a FALLBACK: it belongs on screen when the model has
failed, not before anyone knows whether it has. The window is bounded by
mountVessel's own 5s deadline, and it overlaps the arrival phase, which has
its own thing on screen.
Every vessel is hidden by its PARTS, never by the container it lives in, and
the crate is why. This block used to name `.pc-carton` — and the carton's own
show rule (`[data-pc-vessel="box"] .pc-carton { display: flex }`) has exactly
the same specificity and is declared LATER in this file, so it won the
cascade and the flat gradient crate kept flashing on screen for the whole
load despite the pending flag. Naming the parts sidesteps that entirely: no
part carries a competing `display`. It also keeps `.pc-tape-grip` on screen,
which the container rule was hiding with everything else — the grip is the
affordance, and the CSS build is not openable without it. */
.pc-reveal-root[data-pc-vessel-pending] .pc-pack-body,
.pc-reveal-root[data-pc-vessel-pending] .pc-pack-lid,
.pc-reveal-root[data-pc-vessel-pending] .pc-pack-tear,
.pc-reveal-root[data-pc-vessel-pending] .pc-carton-body,
.pc-reveal-root[data-pc-vessel-pending] .pc-carton-lid,
.pc-reveal-root[data-pc-vessel-pending] .pc-carton-seam,
.pc-reveal-root[data-pc-vessel-pending] .pc-carton-tape,
.pc-reveal-root[data-pc-vessel-pending] .pc-capsule-lower,
.pc-reveal-root[data-pc-vessel-pending] .pc-capsule-upper,
.pc-reveal-root[data-pc-vessel-pending] .pc-capsule-ring,
.pc-reveal-root[data-pc-vessel-pending] .pc-gift-body,
.pc-reveal-root[data-pc-vessel-pending] .pc-gift-lid,
.pc-reveal-root[data-pc-vessel-pending] .pc-gift-band,
.pc-reveal-root[data-pc-vessel-pending] .pc-gift-bow {
display: none;
}
/* The foil pack's CSS build steps aside once its model is up. `.pc-pack`
itself stays: it is the positioning context the rip's grip is placed
against, and the grip is an affordance rather than scenery. */
.pc-reveal-root[data-pc-vessel="pack"][data-pc-vessel-art="pack"] .pc-pack-body,
.pc-reveal-root[data-pc-vessel="pack"][data-pc-vessel-art="pack"] .pc-pack-lid,
.pc-reveal-root[data-pc-vessel="pack"][data-pc-vessel-art="pack"] .pc-pack-tear {
display: none;
}
/* ------------------------------------------------------ the fallback carton
The box's equivalent of `.pc-pack`: what a buyer sees if the baked parts do
not load. Same contract — drawn from gradients, keyed off `--pc-charge`,
takes the tier colour — and the same reason for existing: a crate that has
been paid for must always be openable, whatever the CDN is doing. */
.pc-carton {
position: absolute;
inset: 0;
display: none;
align-items: center;
justify-content: center;
}
.pc-reveal-root[data-pc-vessel="box"] .pc-carton {
display: flex;
}
/* Everything the fallback draws steps aside once the baked art is up — the
seam included, which is easy to miss because it is a light rather than a
surface: left in, it would sit on top of the `emissive` pass and the box
would glow twice. `.pc-carton` itself stays, because it is the positioning
context the tape gesture's grip is placed against. */
.pc-reveal-root[data-pc-vessel="box"][data-pc-vessel-art="box"] .pc-carton-body,
.pc-reveal-root[data-pc-vessel="box"][data-pc-vessel-art="box"] .pc-carton-lid,
.pc-reveal-root[data-pc-vessel="box"][data-pc-vessel-art="box"] .pc-carton-seam,
.pc-reveal-root[data-pc-vessel="box"][data-pc-vessel-art="box"] .pc-carton-tape {
display: none;
}
.pc-carton-body {
position: relative;
width: 150px;
height: 116px;
border-radius: 4px;
/* Board, not foil: a flat warm base with one soft directional shade, and
none of the pack's hard highlight band. The two vessels have to be
distinguishable at a glance in the picker as well as on the stage. */
background:
linear-gradient(168deg, #6b4d33 0%, #4e382512 38%, #3a2a1c 100%),
linear-gradient(90deg, #43301f, #6a4c32 46%, #3d2c1d);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.06),
0 16px 30px rgba(0, 0, 0, 0.55),
0 0 calc(14px + 24px * var(--pc-charge)) var(--pc-tier-glow);
transform: rotate(calc(-0.8deg + 1.4deg * var(--pc-charge)));
transition: transform 0.1s linear;
}
.pc-carton-lid {
position: absolute;
top: calc(50% - 66px);
left: calc(50% - 79px);
width: 158px;
height: 26px;
border-radius: 4px 4px 2px 2px;
background: linear-gradient(178deg, #7a5839, #4a3524);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
transform-origin: center top;
/* Same late swing as the baked lid, so the fallback tells the same story
about which part gives first. */
transform:
translateY(calc(-14px * clamp(0, (var(--pc-charge) - 0.6) / 0.4, 1)))
rotate(calc(-12deg * clamp(0, (var(--pc-charge) - 0.6) / 0.4, 1)));
transition: transform 0.1s linear;
}
.pc-carton-tape {
position: absolute;
top: calc(50% - 70px);
left: calc(50% - 14px);
width: 28px;
height: 116px;
border-radius: 2px;
background: linear-gradient(90deg, rgba(226, 214, 184, 0.5), rgba(246, 240, 220, 0.72), rgba(226, 214, 184, 0.5));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
transform: translateY(calc(30px * var(--pc-charge)));
opacity: calc(1 - 0.85 * var(--pc-charge));
transition: transform 0.1s linear, opacity 0.1s linear;
}
/* The light under the lid, on the fallback carton. */
.pc-carton-seam {
position: absolute;
top: calc(50% - 44px);
left: calc(50% - 75px);
width: 150px;
height: 5px;
border-radius: 3px;
background: linear-gradient(90deg, var(--pc-tier-color), var(--pc-tier-color-to));
box-shadow: 0 0 16px var(--pc-tier-glow);
opacity: calc(var(--pc-charge) * var(--pc-charge));
}
/* The tab, and the affordance for the tape gesture: pull DOWN. Only under
that gesture, for the same reason the pack's grip is only under the rip —
a box can also be tapped, and a downward chevron on a crate you are meant
to hit is an instruction to do the wrong thing. */
.pc-tape-grip {
display: none;
position: absolute;
z-index: 3;
top: calc(50% - 78px);
left: calc(50% - 11px);
width: 22px;
height: 22px;
opacity: calc(1 - var(--pc-charge));
transform: translateY(calc(78px * var(--pc-charge)));
transition: transform 0.08s linear, opacity 0.12s linear;
}
.pc-reveal-root[data-pc-trigger="tape"] .pc-tape-grip {
display: block;
}
.pc-tape-grip::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: #f4f4f8;
box-shadow: 0 0 14px var(--pc-tier-glow);
animation: pc-tab-beckon 1.8s ease-in-out infinite;
}
/* Chevron pointing DOWN — the rip's points right, and the two affordances
have to disagree as loudly as the gestures do. */
.pc-tape-grip::after {
content: "";
position: absolute;
top: 6px;
left: 7px;
width: 7px;
height: 7px;
border-bottom: 2px solid #14141c;
border-right: 2px solid #14141c;
--pc-tab-rotate: 45deg;
animation: pc-tab-beckon 1.8s ease-in-out infinite;
}
@keyframes pc-tab-beckon {
0%, 62%, 100% { transform: translateY(0) rotate(var(--pc-tab-rotate, 0deg)); }
80% { transform: translateY(5px) rotate(var(--pc-tab-rotate, 0deg)); }
}
/* The tape drag runs down the screen; `ns-resize` says so without an asset. */
.pc-reveal-root[data-pc-trigger="tape"] .pc-box-stage {
cursor: ns-resize;
}
@media (prefers-reduced-motion: reduce) {
.pc-tape-grip::before,
.pc-tape-grip::after {
animation: none;
}
}
/* --------------------------------------------------------- the tap's nudges
The first two hits of a three-tap open. Deliberately NOT the driver's
"shake": that one cascades into a crack by contract, so using it here would
open the crate on the first tap. Strength escalates with the count so the
third hit is visibly the one that did it. */
.pc-reveal-root.pc-anim-nudge .pc-box-visual {
animation: pc-nudge 0.34s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.pc-reveal-root.pc-anim-nudge[data-pc-nudge="2"] .pc-box-visual {
animation-name: pc-nudge-hard;
}
@keyframes pc-nudge {
0% { transform: scale(1) rotate(0deg); }
30% { transform: scale(1.07) rotate(-2.5deg); }
60% { transform: scale(0.98) rotate(1.5deg); }
100% { transform: scale(1) rotate(0deg); }
}
@keyframes pc-nudge-hard {
0% { transform: scale(1) rotate(0deg); }
22% { transform: scale(1.13) rotate(-5deg) translateX(-5px); }
48% { transform: scale(0.96) rotate(3.5deg) translateX(5px); }
74% { transform: scale(1.04) rotate(-1.5deg); }
100% { transform: scale(1) rotate(0deg); }
}
/* Same rule the rest of this stylesheet follows: the look survives, the motion
stops. The gesture itself is never reached under reduced motion — the player
skips the whole anticipation phase — but the pack's idle sheen and the
grip's beckon are ambient, not gestural, and would otherwise keep going in
the editor preview. */
@media (prefers-reduced-motion: reduce) {
.pc-pack-sheen,
.pc-pack-grip::before,
.pc-pack-grip::after,
.pc-reveal-root.pc-anim-nudge .pc-box-visual {
animation: none;
}
}
/* ------------------------------------------- phase 3 rarity escalation burst */
.pc-burst {
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 50%, var(--pc-tier-glow), transparent 65%);
animation: pc-burst-in var(--pc-burst-duration, 1s) ease-out forwards;
}
@keyframes pc-burst-in {
0% { opacity: 0; transform: scale(0.4); }
40% { opacity: 1; }
100% { opacity: 0; transform: scale(1.6); }
}
/* A crisp expanding ring riding on top of the soft gradient bloom — the
gradient alone has no edge, and an edge is what reads as an impact. Two
rings offset in time so the eruption has a follow-through. */
.pc-shockwave,
.pc-shockwave::after {
position: absolute;
top: 50%;
left: 50%;
width: 160px;
height: 160px;
margin: -80px 0 0 -80px;
border-radius: 50%;
border: 2px solid color-mix(in srgb, var(--pc-tier-glow) 80%, #ffffff);
animation: pc-shockwave-out var(--pc-burst-duration, 1s) cubic-bezier(0.15, 0.75, 0.3, 1) forwards;
}
.pc-shockwave::after {
content: "";
top: 0;
left: 0;
margin: 0;
width: 100%;
height: 100%;
animation-delay: 0.16s;
opacity: 0;
}
@keyframes pc-shockwave-out {
0% { transform: scale(0.2); opacity: 0.9; border-width: 3px; }
100% { transform: scale(4.2); opacity: 0; border-width: 1px; }
}
/* A single WCAG-safe flash pulse (Epic/Legendary only, capped at one per
reveal by packages/reveal-engine/src/tiers.ts's flashCount type) — a plain
white wash over the whole viewport, tweened by GSAP in runEscalation.
Sits above phase content (z-index 2) but below the skip button (3), so
it never visually swallows the one control a buyer needs mid-sequence. */
.pc-flash-overlay {
position: absolute;
inset: 0;
z-index: 2;
background: #ffffff;
opacity: 0;
pointer-events: none;
}
/* The product image coalescing out of the burst — see spawnMaterializeImage.
Sized and proportioned to match .pc-prize-image below so the crossfade
into the prize card reads as one continuous image, not a jump between two. */
.pc-materialize-image {
position: absolute;
inset: 0;
z-index: 1;
margin: auto;
width: var(--pc-card-w);
height: calc(var(--pc-card-w) / 0.656);
object-fit: cover;
border-radius: 12px;
box-shadow: 0 0 60px var(--pc-tier-glow);
}
/* The one surface every eruption paints on (rarium-burst-fx.js). It
replaced a canvas per layer: only a single effect ever runs, and the
effects composite their own fog/dust/beam/bloom passes internally, so
extra DOM surfaces bought nothing but idle compositing layers. */
.pc-fx-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
mix-blend-mode: screen;
}
/* `.pc-burst`'s radial bloom and `.pc-shockwave`'s expanding rings are not
neutral scaffolding — they ARE the ember eruption, in CSS. Every other
effect brings its own light, and leaving these underneath would put a
generic bloom behind a funnel, a lattice or a comet strike and flatten all
four back into the one burst they exist to replace. */
.pc-reveal-root[data-pc-fx]:not([data-pc-fx="ember"]) .pc-burst,
.pc-reveal-root[data-pc-fx]:not([data-pc-fx="ember"]) .pc-shockwave {
display: none;
}
/* ------------------------------------------------------- phase 4 prize card */
/* The card is the hero and the only thing at full brightness: no panel, no
container chrome, no border around the composition — it hangs in the
stage's own light with the rays and aura behind it, and everything else
(tier name, condition, value, ships-note) is set small and quiet beneath
it. --pc-card-w is the one measure the whole beat is built from; the vh
term is what keeps the full stack on screen in a short viewport (the
admin theme editor's preview frame included) without a media query. */
.pc-prize {
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(10px, 2.4vh, 20px);
/* A column flex container sizes its centred children to max-content, which
lets a long headline (a merchant's own tier name, in any language) grow
past the viewport and get clipped by the phase's overflow instead of
wrapping. This is the cap that makes it wrap. */
max-width: 100%;
}
.pc-prize-headline {
margin: 0;
max-width: 100%;
font-family: var(--pc-display);
/* Tracking is part of the width budget here: 0.18em on a 14-character
tier name added ~55px, which is what pushed "LEGENDARY PULL" off a
390px screen before the cap above existed. */
font-size: clamp(1rem, 5.2vw, 2rem);
font-weight: 800;
letter-spacing: 0.14em;
text-wrap: balance;
text-transform: uppercase;
color: #ffffff;
text-shadow:
0 0 14px color-mix(in srgb, var(--pc-tier-glow) 85%, transparent),
0 0 44px color-mix(in srgb, var(--pc-tier-glow) 60%, transparent),
0 2px 2px rgba(0, 0, 0, 0.45);
animation: pc-headline-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes pc-headline-in {
0% { opacity: 0; transform: translateY(10px); letter-spacing: 0.34em; }
100% { opacity: 1; transform: translateY(0); letter-spacing: 0.14em; }
}
.pc-prize-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
animation: pc-card-in 0.72s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes pc-card-in {
0% { transform: scale(0.88) translateY(18px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}
/* The perspective must live on an ancestor of the rotating element (.pc-
prize-tilt), not the element itself, or the 3D transform has nowhere to
project into. */
.pc-prize-stage {
position: relative;
perspective: 1000px;
width: var(--pc-card-w);
margin-bottom: clamp(10px, 2vh, 18px);
}
/* Rays behind the card specifically — tighter and brighter than the stage's
own, anchored to the card rather than the viewport, which is what makes
the card read as the light SOURCE instead of something lit by the room. */
.pc-prize-rays {
position: absolute;
top: 50%;
left: 50%;
width: 260%;
height: 260%;
transform: translate(-50%, -50%);
background: repeating-conic-gradient(
from 0deg,
rgba(255, 255, 255, 0) 0deg,
color-mix(in srgb, var(--pc-tier-glow) 90%, #ffffff) 2.4deg,
rgba(255, 255, 255, 0) 4.8deg,
rgba(255, 255, 255, 0) 11deg
);
-webkit-mask-image: radial-gradient(circle at center, transparent 12%, #000 30%, transparent 68%);
mask-image: radial-gradient(circle at center, transparent 12%, #000 30%, transparent 68%);
mix-blend-mode: screen;
opacity: 0.34;
pointer-events: none;
animation: pc-rays-turn 58s linear infinite, pc-prize-rays-in 0.9s ease-out both;
}
@keyframes pc-prize-rays-in {
0% { opacity: 0; }
100% { opacity: 0.34; }
}
/* A flat, blurred backdrop BEHIND the tilting card — rarium-card-tilt.js
sets --pc-tilt-px/py on .pc-prize-tilt (every tier, not just foil-earning
ones), so this tracks the pointer even when no foil is wired. Sibling of
.pc-prize-tilt, not a child of it, so it stays a flat glow and doesn't
itself rotate along with the 3D card. */
.pc-prize-glow {
position: absolute;
inset: -18%;
border-radius: 50%;
background: radial-gradient(
circle at var(--pc-tilt-px, 50%) var(--pc-tilt-py, 50%),
var(--pc-tier-glow),
transparent 62%
);
filter: blur(26px);
opacity: 0.55;
pointer-events: none;
animation: pc-aura-breathe 5s ease-in-out infinite;
}
/* rarium-card-tilt.js's wireCardTilt tweens rotateX/rotateY here via
GSAP (every tier — a floating 3D card is a presentation nicety, not a
rarity tell, unlike the foil sweep below). transform-style flat (the
default) is fine — the image inside is a single 2D layer, nothing needs
composing in its own 3D space. */
.pc-prize-tilt {
position: relative;
width: var(--pc-card-w);
border-radius: 12px;
overflow: hidden;
transform: perspective(1000px);
will-change: transform;
box-shadow:
0 22px 48px -18px rgba(0, 0, 0, 0.95),
0 0 46px -8px color-mix(in srgb, var(--pc-tier-glow) 70%, transparent);
}
/* One-shot specular sweep as the card lands — the "it's real, and it's
glossy" beat. Runs once on entry, never loops: a permanently travelling
shine is a hallmark of cheap templates, and the foil below is what carries
the ongoing life. */
.pc-prize-tilt::before {
content: "";
position: absolute;
top: -60%;
bottom: -60%;
left: -45%;
width: 34%;
z-index: 3;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.55) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: rotate(14deg);
mix-blend-mode: screen;
pointer-events: none;
animation: pc-card-shine 1.15s 0.36s cubic-bezier(0.32, 0, 0.24, 1) both;
}
/* Travels on a transform rather than on `left` — same sweep, no layout pass
per frame while the card is also settling in behind it. 470% is the 160%
of card width the band has to cross, expressed in the band's own 34%
width; translate is written before rotate so it still travels along the
card's horizontal axis, not the tilted one. */
@keyframes pc-card-shine {
0% { transform: translateX(0) rotate(14deg); opacity: 0; }
22% { opacity: 1; }
100% { transform: translateX(470%) rotate(14deg); opacity: 0; }
}
/* Real card art ratio (744x1134 in the sample pool, ratio ~0.656) — a square
crop badly cropped a portrait card's top/bottom off. */
.pc-prize-image {
position: relative;
display: block;
width: 100%;
aspect-ratio: 744 / 1134;
object-fit: cover;
background: #111;
}
/* Pointer/gyro-reactive holographic foil (rarium-foil.js wires
--pc-foil-x/y on the tilt element) — Rare and up only (Base gets no foil,
matching every tier-escalation table in the design docs).
*
* Rebuilt as two stacked layers because ONE color-dodge rainbow layer is
* what made the old foil read grainy and cheap: color-dodge clips to pure
* white wherever the art underneath is already bright, so a busy card face
* turned into blown-out speckle rather than a sheen. Now:
* 1. this element — a wide, low-contrast rainbow sheet in `soft-light`,
* which shifts hue without ever clipping, and
* 2. ::after — the specular hotspot in `overlay`, the only layer allowed
* to add real brightness, and only in a small pointer-tracked spot.
* Both are masked to fade out at the card's edges so the sheen sits ON the
* face instead of ending in a hard rectangle. */
.pc-prize-holo {
/* ---- the grating, as parameters ----------------------------------------
Named so the three patterns below can differ by VALUES rather than by
re-declaring the whole stack. Defaults are the parallel case. */
/* Groove orientation. Off-vertical because a foil raked at a slight angle
reads as manufactured; at 0deg or 90deg it reads as a screen artifact. */
--pc-groove: 105deg;
/* Groove pitch, as a share of the card. Small, because the thing that makes
a real grating read as a grating is that the spectral bands are NARROW —
the old version's mistake was a wash so wide it was just a tint. */
--pc-pitch: 11%;
/* The streak layer's own, coarser pitch. Separate from the film's because
the two are different diffraction orders: the broad slashes throw a wider
spectrum than the fine substrate does. */
--pc-streak-pitch: 22%;
/* Tile size of the fracture pattern — how long the slashes run before the
grating lifts. Larger = fewer, longer marks. */
--pc-fracture: 88%;
/* Tile spacing of the star field, how big each star is drawn, and how
bright the field runs. Size is its own knob rather than being derived
from the tile: spacing and scale are independent choices, and tying them
together meant a denser field could only ever be a field of smaller
stars. */
--pc-star-tile: 210px;
--pc-star-gain: 1;
/* How bright the fractured slashes run. Pulled out as its own knob because
it is the value that decides whether the foil reads as treatment or as
decoration sitting on the artwork. It has now been wrong in both
directions: 0.85 let the bands compete with the product, and the 0.5 that
replaced it took the effect to almost nothing. 0.9 with the grain doing
the work is not a return to the first value — the grain is what stops a
bright band reading as a printed ribbon, and it did not exist then. */
--pc-streak-gain: 0.9;
/* Particle size of the grain inside each slash. Big enough to be legible as
glinting particles at card scale; below about 4px it stops resolving and
the slash just looks solid again. */
--pc-grain: 5.5px;
/* How wide the diffraction lobe is: the band of the card that is returning
light at any one moment. Wider = more of the card lit, less directional. */
--pc-lobe: 38%;
/* Overall radiance of the returned light. */
--pc-foil-gain: 0.85;
/* Pushed past the source gradients' own saturation. The spectrum stops are
already near-pure, but every layer below is masked and blended down, and
the result lands duller than any of its parts — this puts the colour back
at the end rather than by inventing brighter-than-sRGB stops. */
filter: saturate(1.35);
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
pointer-events: none;
opacity: 0;
transition: opacity 0.5s ease-out;
/* Additive, not soft-light. Everything under this container is LIGHT
RETURNED BY the card, so it can only ever add — the reference's whole
point is that the shader adds radiance and never repaints the art.
soft-light was the old compromise and it is why the sheen could darken a
bright card and never got bright enough on a dark one. plus-lighter is
the one blend mode that is truly additive and clamps instead of clipping
to white the way color-dodge does.
It sits on the CONTAINER as well as on each child, and both are needed:
masking makes this element an isolated group, so the children's own
plus-lighter sums them against each other INSIDE the group, and this one
then adds that sum onto the artwork. Drop either and the effect either
stops glowing between layers or stops lighting the card. */
mix-blend-mode: plus-lighter;
/* ---- the lobe -----------------------------------------------------------
Two masks multiplied: the travelling band (what makes it directional) and
an edge falloff (so the sheen sits ON the face rather than ending at a
hard rectangle). This is the single most important part of the illusion —
without it the card wears a static rainbow, which is what a printed
gradient looks like, not what foil looks like.
Declared once, HERE, rather than per layer: every groove field below is
gated by the same lobe because they are all the same piece of foil caught
at the same angle. That is also what keeps each child down to a single
mask of its own. */
-webkit-mask-image:
linear-gradient(
var(--pc-groove),
transparent calc(var(--pc-foil-lobe, 50%) - var(--pc-lobe)),
rgba(0, 0, 0, 0.92) var(--pc-foil-lobe, 50%),
transparent calc(var(--pc-foil-lobe, 50%) + var(--pc-lobe))
),
radial-gradient(125% 105% at 50% 50%, #000 40%, rgba(0, 0, 0, 0.15) 100%);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(
var(--pc-groove),
transparent calc(var(--pc-foil-lobe, 50%) - var(--pc-lobe)),
rgba(0, 0, 0, 0.92) var(--pc-foil-lobe, 50%),
transparent calc(var(--pc-foil-lobe, 50%) + var(--pc-lobe))
),
radial-gradient(125% 105% at 50% 50%, #000 40%, rgba(0, 0, 0, 0.15) 100%);
mask-composite: intersect;
}
/* Every layer fills the container and adds into it. Declared once so the four
below carry only what makes them different. */
.pc-prize-holo > span {
position: absolute;
inset: 0;
border-radius: inherit;
mix-blend-mode: plus-lighter;
}
/* ---- layer 1: the film ----------------------------------------------------
A dense, low-amplitude grating covering the whole face. This is the one
that has to stay SUBTLE — it is the substrate the other layers sit on, and
its job is to make the card look coated rather than to be seen in its own
right. Fine pitch and low opacity: at any higher amplitude it stops reading
as a surface treatment and starts reading as a rainbow filter. */
.pc-holo-film {
background: repeating-linear-gradient(
var(--pc-groove),
rgba(255, 60, 110, 0.5) 0%,
rgba(255, 200, 70, 0.45) calc(var(--pc-pitch) * 0.18),
rgba(130, 255, 150, 0.45) calc(var(--pc-pitch) * 0.36),
rgba(80, 235, 255, 0.5) calc(var(--pc-pitch) * 0.54),
rgba(110, 140, 255, 0.5) calc(var(--pc-pitch) * 0.72),
rgba(235, 110, 255, 0.45) calc(var(--pc-pitch) * 0.88),
rgba(255, 60, 110, 0.5) var(--pc-pitch)
);
opacity: 0.52;
}
/* ---- layer 2: fractured first-order streaks -------------------------------
The hero, and the thing the previous version was missing entirely. In the
reference the bright rainbow marks are not continuous bands running edge to
edge — they are discrete slashes of different lengths, because the embossed
grating is interrupted rather than ruled across the whole card.
Built by cutting the spectrum ALONG the streak direction. A
`repeating-linear-gradient()` varies colour along , so its bands run
perpendicular to — which means the mask that chops those bands into
segments has to run at + 90deg.
The irregular lengths come from the stop pattern INSIDE one mask period,
not from stacking two gradients at coprime periods. One layer, three
segments of deliberately unequal length and spacing, and the eye stops
finding the repeat. */
.pc-holo-streaks {
/* No background of its own. This element is now only the SHAPE of the
slashes — where they are and how they taper — and its child carries the
light. Splitting them is what allows the grain: two masks that need to
multiply cannot both live on one element without an explicit composite,
and nesting multiplies them for free because a parent's mask clips its
child. */
opacity: var(--pc-streak-gain);
-webkit-mask-image: repeating-linear-gradient(
calc(var(--pc-groove) + 90deg),
transparent 0 4%,
rgba(0, 0, 0, 0.55) 7%,
#000 10% 15%,
rgba(0, 0, 0, 0.4) 18%,
transparent 21% 29%,
rgba(0, 0, 0, 0.6) 32%,
#000 34% 37%,
transparent 41% 53%,
rgba(0, 0, 0, 0.5) 57%,
#000 61% 69%,
rgba(0, 0, 0, 0.45) 73%,
transparent 77% 100%
);
mask-image: repeating-linear-gradient(
calc(var(--pc-groove) + 90deg),
transparent 0 4%,
rgba(0, 0, 0, 0.55) 7%,
#000 10% 15%,
rgba(0, 0, 0, 0.4) 18%,
transparent 21% 29%,
rgba(0, 0, 0, 0.6) 32%,
#000 34% 37%,
transparent 41% 53%,
rgba(0, 0, 0, 0.5) 57%,
#000 61% 69%,
rgba(0, 0, 0, 0.45) 73%,
transparent 77% 100%
);
-webkit-mask-size: var(--pc-fracture) var(--pc-fracture);
mask-size: var(--pc-fracture) var(--pc-fracture);
}
/* The light inside a slash, and the reason the streaks stopped reading as
printed ribbon (2026-08-18).
In the reference the bright marks are not solid colour — they are made of
GRAIN. Each slash is a crowd of tiny glinting particles that happen to be
returning the same part of the spectrum, which is why the mark has texture
and soft, dissolving ends rather than clean edges. A flat gradient band, at
any opacity, reads as a sticker.
The grain is a fine dot field multiplied into the slash by nesting, and its
tile is deliberately not a round number so it never beats against the
fracture tile above it into a visible plaid. */
.pc-holo-streaks::after {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(
var(--pc-groove),
rgba(255, 45, 95, 0.95) 0%,
rgba(255, 205, 65, 0.92) calc(var(--pc-streak-pitch) * 0.16),
rgba(125, 255, 145, 0.92) calc(var(--pc-streak-pitch) * 0.33),
rgba(70, 240, 255, 0.95) calc(var(--pc-streak-pitch) * 0.5),
rgba(105, 130, 255, 0.95) calc(var(--pc-streak-pitch) * 0.67),
rgba(240, 100, 255, 0.92) calc(var(--pc-streak-pitch) * 0.84),
rgba(255, 45, 95, 0.95) var(--pc-streak-pitch)
);
-webkit-mask-image: radial-gradient(
circle at 50% 50%,
#000 0 1.1px,
rgba(0, 0, 0, 0.4) 1.7px,
transparent 2.6px
);
mask-image: radial-gradient(
circle at 50% 50%,
#000 0 0.6px,
rgba(0, 0, 0, 0.35) 1px,
transparent 1.7px
);
-webkit-mask-size: var(--pc-grain) var(--pc-grain);
mask-size: var(--pc-grain) var(--pc-grain);
}
/* ---- layer 3: star microgratings ------------------------------------------
Four-point stars, not dots. A dot field reads as glitter paint; the
reference's flecks have spikes, which is what a point-like grating actually
throws.
The field is an SVG data URI rather than a tiled gradient, and that is the
whole reason it stopped reading as a grid (2026-08-18). A gradient mask can
repeat exactly ONE shape at ONE spacing, so however the tile was tuned the
eye found the lattice. An SVG tile carries forty-odd stars at arbitrary
positions, in three shapes (four-point, six-point, round) and a range of
sizes weighted small — a field of uniformly large stars reads as confetti,
uniformly small as noise. The tile still repeats, at 200px, but the repeat
of an irregular field is not findable the way the repeat of one dot is.
Generated by a seeded script so the committed field is reproducible: one
that changed on every regeneration would make every future diff of this
file meaningless.
Colour comes from the spectrum showing THROUGH the mask rather than from
painting coloured stars, so neighbouring stars land on different parts of
the spectrum and come back different colours by themselves. */
.pc-holo-stars {
background: repeating-linear-gradient(
calc(var(--pc-groove) + 24deg),
rgba(255, 70, 120, 0.95) 0%,
rgba(255, 215, 90, 0.95) 3%,
rgba(140, 255, 165, 0.95) 6%,
rgba(90, 240, 255, 0.95) 9%,
rgba(125, 150, 255, 0.95) 12%,
rgba(245, 120, 255, 0.95) 15%,
rgba(255, 70, 120, 0.95) 18%
);
opacity: var(--pc-star-gain);
-webkit-mask-image: var(--pc-field-1);
mask-image: var(--pc-field-1);
-webkit-mask-size: var(--pc-star-tile) var(--pc-star-tile);
mask-size: var(--pc-star-tile) var(--pc-star-tile);
animation: pc-holo-twinkle 4.2s ease-in-out infinite;
}
/* Two more fields, so the sky is not one field repeated.
*
* Each is its OWN scattered SVG — a different seed, a different count, a
* different scale — rather than the same field moved or rotated. Reusing one
* field at two offsets is what a tiled mask already does, and it produces
* correlated twinkle: stars appearing and vanishing in step because they are
* the same stars. Three independent fields have nothing to correlate.
*
* The rotation is why this element is oversized by 30%: a rotated box leaves
* bare corners at its original size.
*
* Counter-phasing is also what makes it TWINKLE rather than pulse — one field
* brightening while another dims means individual stars come and go, which a
* single field animating its own opacity can never do. That just makes the
* whole sky breathe. */
.pc-holo-stars::after {
content: "";
position: absolute;
inset: -30%;
background: inherit;
transform: rotate(31deg);
-webkit-mask-image: var(--pc-field-2);
mask-image: var(--pc-field-2);
-webkit-mask-size: calc(var(--pc-star-tile) * 1.45) calc(var(--pc-star-tile) * 1.45);
mask-size: calc(var(--pc-star-tile) * 1.45) calc(var(--pc-star-tile) * 1.45);
-webkit-mask-position: 40% 60%;
mask-position: 40% 60%;
opacity: 0.75;
animation: pc-holo-twinkle 4.2s ease-in-out infinite reverse;
}
.pc-holo-stars::before {
content: "";
position: absolute;
inset: 0;
background: inherit;
-webkit-mask-image: var(--pc-field-3);
mask-image: var(--pc-field-3);
-webkit-mask-size: calc(var(--pc-star-tile) * 0.72) calc(var(--pc-star-tile) * 0.72);
mask-size: calc(var(--pc-star-tile) * 0.72) calc(var(--pc-star-tile) * 0.72);
-webkit-mask-position: 17% 43%;
mask-position: 17% 43%;
opacity: 0.55;
/* A third period, deliberately not a multiple of the other two, so the
three fields never all peak on the same frame. */
animation: pc-holo-twinkle 6.7s ease-in-out infinite;
}
@keyframes pc-holo-twinkle {
0%,
100% {
opacity: 0.35;
}
50% {
opacity: 1;
}
}
/* ---- layer 4: the zeroth order --------------------------------------------
The plain specular return — the part of the light that comes back white
instead of being split into colours. Kept because a grating surface is
still a surface: without it the card reads as glowing from inside rather
than as catching a light. Overlay, not plus-lighter, so it shapes the
highlight instead of blowing it out. */
.pc-holo-spec {
background: radial-gradient(
farthest-side circle at var(--pc-foil-x, 50%) var(--pc-foil-y, 50%),
rgba(255, 255, 255, 0.45) 0%,
rgba(255, 255, 255, 0.1) 28%,
rgba(255, 255, 255, 0) 58%
);
mix-blend-mode: overlay;
}
.pc-prize-tilt[data-foil] .pc-prize-holo {
opacity: var(--pc-foil-gain);
}
/* "None" has to be able to switch the holo OFF on a card that is already
wired, not merely decline to wire a new one.
*
* `wireFoilIfEarned` skips wiring when the merchant has the holo off, which
* is correct on first paint and useless afterwards: in the editor the card is
* wired once and then restyled in place over postMessage, so the element
* keeps its `[data-foil]` for the rest of the session and the rule above
* kept the foil visible whatever was chosen. Same specificity as that rule
* (0,3,0), so this wins purely by coming later — deliberately, rather than
* by reaching for !important. */
.pc-reveal-root[data-pc-foil="none"] .pc-prize-holo {
opacity: 0;
}
/* ---- pattern: linear ------------------------------------------------------
All four layers, weighted toward the fractured streaks: parallel grooves
ruled across the face and cut into slashes. The star field is present
but held right back — on a ruled foil it is the glint, not the subject. */
.pc-reveal-root[data-pc-foil="linear"] .pc-prize-holo {
--pc-groove: 105deg;
--pc-pitch: 11%;
--pc-streak-pitch: 22%;
--pc-fracture: 88%;
--pc-star-tile: 240px;
--pc-star-gain: 0.6;
--pc-lobe: 38%;
--pc-foil-gain: 0.9;
}
/* ---- pattern: cosmos ------------------------------------------------------
Nebula: coloured cloud structure with sparse, large stars over it.
This is the third thing Cosmos has been, and the reason is worth recording
because the first two both failed the same test. As a ruled grating it was
"Linear with more stars". As a concentric grating it was invisible — the
rings were 11px wide and the grain mask inside them is 4px, so intersecting
the two left almost nothing, and what a merchant actually saw was the star
field alone. Both times the pattern's identity came from a parameter rather
than from a different idea, and a parameter is not an identity.
So this one is a different idea. Nothing else in the set has STRUCTURE at
card scale — Linear rakes, Glitter is uniform, Frost is a scatter — and a
few large soft colour masses give the eye something to read as a place
rather than as a finish. It is also the one pattern where the tier colour
has real room, which suits the name.
Deliberately no ruled slashes at all. Adding them back is what made this
collide with Linear twice. */
.pc-reveal-root[data-pc-foil="cosmos"] .pc-prize-holo {
--pc-groove: 118deg;
--pc-pitch: 15%;
/* Large and sparse: a few big stars over the clouds, not a dense field.
Density is Glitter's job, and two patterns cannot both own it. */
--pc-star-tile: 300px;
--pc-star-gain: 1;
--pc-streak-gain: 0;
--pc-lobe: 72%;
--pc-foil-gain: 0.9;
}
/* The clouds. Four soft masses at different scales and hues, sized in
percentages so they scale with the card rather than pixelating on a phone.
They sit on the film layer because the film is the one that already covers
the whole face — this replaces its fine grating rather than adding a fifth
element to the stack. */
.pc-reveal-root[data-pc-foil="cosmos"] .pc-holo-film {
background:
radial-gradient(58% 44% at 26% 20%, rgba(130, 95, 255, 0.95) 0%, transparent 70%),
radial-gradient(48% 38% at 74% 32%, rgba(255, 75, 185, 0.85) 0%, transparent 72%),
radial-gradient(66% 52% at 52% 76%, rgba(60, 205, 255, 0.85) 0%, transparent 70%),
radial-gradient(42% 36% at 16% 74%, rgba(255, 195, 95, 0.6) 0%, transparent 72%);
opacity: 0.85;
}
/* Nothing ruled. Kept as an explicit rule rather than left to the gain
variable so the intent survives someone tuning gains later. */
.pc-reveal-root[data-pc-foil="cosmos"] .pc-holo-streaks {
display: none;
}
/* ---- pattern: frost -------------------------------------------------------
Snowflakes and ice sparkle, for the holiday quarter.
The only pattern whose shapes are OUTLINES rather than solids: a real
snowflake foil is drawn as fine dendrites, and filling them turns a
snowflake into a blob at any size small enough to scatter. Outlines also
keep it lighter than Glitter despite the shapes being larger — there is far
less area returning light per flake.
Cool-shifted spectrum. Every other pattern here runs the full rainbow;
this one is pulled toward blue-white-cyan, because a snowflake throwing
orange reads as an autumn leaf. It is still a spectrum — ice really does
split light — just a narrower arc of one. */
.pc-reveal-root[data-pc-foil="frost"] .pc-prize-holo {
--pc-groove: 88deg;
--pc-pitch: 16%;
--pc-streak-pitch: 30%;
--pc-fracture: 160%;
--pc-star-tile: 260px;
--pc-star-gain: 1;
--pc-streak-gain: 0.22;
--pc-grain: 4px;
--pc-lobe: 78%;
--pc-foil-gain: 0.88;
}
.pc-reveal-root[data-pc-foil="frost"] .pc-holo-stars {
background: repeating-linear-gradient(
calc(var(--pc-groove) + 24deg),
rgba(160, 230, 255, 0.95) 0%,
rgba(255, 255, 255, 0.95) 3.5%,
rgba(140, 255, 235, 0.95) 7%,
rgba(120, 190, 255, 0.95) 10.5%,
rgba(215, 200, 255, 0.95) 14%,
rgba(160, 230, 255, 0.95) 17.5%
);
-webkit-mask-image: var(--pc-field-4);
mask-image: var(--pc-field-4);
}
.pc-reveal-root[data-pc-foil="frost"] .pc-holo-stars::after {
-webkit-mask-image: var(--pc-field-5);
mask-image: var(--pc-field-5);
}
.pc-reveal-root[data-pc-foil="frost"] .pc-holo-stars::before {
-webkit-mask-image: var(--pc-field-6);
mask-image: var(--pc-field-6);
}
/* The zeroth-order glare, pulled well back for this pattern only.
Every other foil here returns light from solid shapes, which survive a
bright specular disc sitting on them. Frost is drawn as fine outlines, and
the glare washed the flakes out precisely where the pointer was — the one
place the merchant is looking. Softened and spread rather than removed: a
surface with no specular at all stops reading as a surface. */
.pc-reveal-root[data-pc-foil="frost"] .pc-holo-spec {
background: radial-gradient(
farthest-side circle at var(--pc-foil-x, 50%) var(--pc-foil-y, 50%),
rgba(255, 255, 255, 0.16) 0%,
rgba(255, 255, 255, 0.05) 38%,
rgba(255, 255, 255, 0) 72%
);
}
/* Slower than Glitter. Snow settles; it does not fizz. */
.pc-reveal-root[data-pc-foil="frost"] .pc-holo-stars {
animation-duration: 5.4s;
}
.pc-reveal-root[data-pc-foil="frost"] .pc-holo-stars::after {
animation-duration: 7.3s;
}
.pc-reveal-root[data-pc-foil="frost"] .pc-holo-stars::before {
animation-duration: 6.1s;
}
/* ---- pattern: glitter -----------------------------------------------------
Sparkle wall to wall, for festive drops and beauty products.
Replaced a radial "prism" the same day it shipped. That one was correct
optics and nearly invisible: a radial grating concentrates its whole
spectrum near one point, so on a busy product photo there was nothing to
see anywhere else. Correctness that cannot be perceived is not a feature.
The change of intent shows in the parameters rather than in new machinery.
The lobe opens almost all the way, so the grating is returning light across
the entire face at once instead of in a travelling band — the one place in
this file where directionality is deliberately given up, because "glittering
everywhere" is the brief. The slashes fall away to almost nothing and the
star fields carry the whole effect at their tightest tile. */
.pc-reveal-root[data-pc-foil="glitter"] .pc-prize-holo {
--pc-groove: 96deg;
--pc-pitch: 18%;
--pc-star-tile: 205px;
--pc-star-gain: 1;
/* Zero, not "a trace". At 0.32 the slashes were still the first thing the
eye found, which put this back in Linear's territory and left the two
patterns arguing over the same idea. Glitter is the star pattern; the
stars have to be the only thing in it. */
--pc-streak-gain: 0;
--pc-grain: 4px;
/* Wide on purpose: at this width the lobe stops being a band and becomes
"most of the card", which is what makes this one read as a coating rather
than as a rake of light. */
--pc-lobe: 88%;
--pc-foil-gain: 0.92;
}
/* The film carries more of the load here than in the ruled patterns, so the
sparkle sits on something rather than floating on the bare photograph. */
.pc-reveal-root[data-pc-foil="glitter"] .pc-holo-film {
opacity: 0.6;
}
/* Same reason as the gain above: removed, not dimmed. */
.pc-reveal-root[data-pc-foil="glitter"] .pc-holo-streaks {
display: none;
}
/* Faster than the other patterns, because festive glitter shimmers rather
than slowly breathing — but THREE different durations, not one.
*
* A single `animation-duration` across all three fields was the mistake that
* made this look static (2026-08-18). Same period plus the reverse direction
* on one layer means the whole sky returns to the same state every 2.6s, and
* a loop that short and that regular stops reading as twinkle and starts
* reading as a pulse — or, once the eye has learned it, as nothing at all.
* Mutually non-multiple periods take thousands of seconds to repeat the
* combined state, so no pattern is ever available to learn. */
.pc-reveal-root[data-pc-foil="glitter"] .pc-holo-stars {
animation-duration: 2.3s;
}
.pc-reveal-root[data-pc-foil="glitter"] .pc-holo-stars::after {
animation-duration: 3.1s;
}
.pc-reveal-root[data-pc-foil="glitter"] .pc-holo-stars::before {
animation-duration: 4.7s;
}
/* Four composited layers whose mask offsets change with the pointer — no
canvas, no WebGL, no per-frame JavaScript beyond the one handler that
already existed, and no layout or paint work per frame (masks and blends
are GPU compositing). That is what keeps this affordable on the phones the
reveal already targets.
Reduced motion keeps the foil, because it is material rather than
animation, and stops only the thing that moves on its own: the twinkle.
The lobe still follows a deliberate touch. */
@media (prefers-reduced-motion: reduce) {
.pc-prize-holo {
transition: none;
}
.pc-holo-stars,
.pc-holo-stars::after,
.pc-holo-stars::before {
animation: none;
opacity: 0.7;
}
}
/* --------------------------------------------------------------------------
Card edge — light around the pulled card (rebuilt 2026-08-18)
Two earlier versions failed in opposite directions and both failures were
about the SAME thing: where the effect lives relative to the card.
v1 put a ring inside .pc-prize-tilt, which clips its children, so every
treatment rendered correctly and was cropped away to nothing. v2 moved it
out and gave it a 24-30px masked band — which un-clipped it but drew a
second rounded rectangle floating around the card, reading as a detached
frame rather than as the card being lit.
The resolution is that a band was the wrong primitive. The element now sits
EXACTLY on the card (inset 0, same radius) and everything extends outward
through blur and box-shadow instead. That is what makes it attached: the
only hard geometry in the effect is the card's own outline, so there is no
second edge for the eye to find.
Interior coverage is prevented by masking each moving layer to a band that
starts at the card edge, not by keeping opacities low.
-------------------------------------------------------------------------- */
.pc-prize-edge {
position: absolute;
/* The card itself. Nothing here is offset from it. */
inset: 0;
z-index: 3;
border-radius: 12px;
pointer-events: none;
opacity: 0;
transition: opacity 0.6s ease-out;
}
.pc-prize-edge > span {
position: absolute;
display: block;
border-radius: inherit;
}
.pc-reveal-root:not([data-pc-edge="none"]) .pc-prize-edge {
opacity: 1;
transition-delay: 0.45s;
}
/* ---- beam -----------------------------------------------------------------
One bright band travelling clockwise with a decaying tail. Unchanged in
character — a beam IS a border light, so it is the one treatment the band
primitive suited. It keeps a tight ring; the rest of the outward light
comes from the shadow on the tilt. */
.pc-reveal-root[data-pc-edge="beam"] .pc-prize-edge {
padding: 3px;
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: exclude;
overflow: hidden;
}
.pc-reveal-root[data-pc-edge="beam"] .pc-prize-edge > span {
inset: -60%;
border-radius: 50%;
background: conic-gradient(
from 0deg,
transparent 0deg 190deg,
color-mix(in srgb, var(--pc-tier-glow) 45%, transparent) 250deg,
var(--pc-tier-color) 320deg,
#fff 350deg,
color-mix(in srgb, #fff 70%, var(--pc-tier-color)) 358deg,
transparent 360deg
);
animation: pc-edge-orbit 4.5s linear infinite;
}
.pc-reveal-root[data-pc-edge="beam"] .pc-prize-edge::after {
content: "";
position: absolute;
inset: -60%;
border-radius: 50%;
opacity: 0.4;
background: conic-gradient(
from 0deg,
transparent 0deg 250deg,
color-mix(in srgb, var(--pc-tier-color) 60%, transparent) 320deg,
#fff 352deg,
transparent 360deg
);
animation: pc-edge-orbit 7.3s linear infinite reverse;
}
@keyframes pc-edge-orbit {
to {
transform: rotate(1turn);
}
}
/* ---- flame ----------------------------------------------------------------
A burning frame: a hot line ON the card's own edge, with tongues rising off
it and dying out in the air.
The reference is specific about this and it is what the previous version
missed — the fire is BRIGHTEST exactly at the border and everything else is
what comes off it. So the hot line is drawn on the element itself (which is
the card's outline), and the tongues are a separate layer that is free to
leave. Nothing draws a rectangle in between, which is what was reading as a
detached frame. */
.pc-reveal-root[data-pc-edge="flame"] .pc-prize-edge {
border: 1px solid rgba(255, 232, 190, 0.9);
box-shadow:
0 0 3px 1px rgba(255, 224, 160, 0.95),
0 0 14px 2px rgba(255, 150, 50, 0.8),
0 0 42px 8px rgba(255, 95, 20, 0.45),
inset 0 0 12px rgba(255, 175, 75, 0.55);
animation: pc-edge-heat 3.4s ease-in-out infinite alternate;
}
/* The tongues. Free-standing, blurred hard, and masked so they only exist
OUTSIDE the card — they lick past the border and thin out rather than
ending on a line. Anchored per side so the fire has a direction: it rises. */
.pc-reveal-root[data-pc-edge="flame"] .pc-prize-edge > span {
inset: -46px;
border-radius: 0;
filter: blur(11px);
background:
radial-gradient(22% 30% at 12% 82%, rgba(255, 190, 70, 0.95) 0%, transparent 72%),
radial-gradient(18% 26% at 33% 90%, rgba(255, 130, 30, 0.95) 0%, transparent 74%),
radial-gradient(20% 28% at 62% 88%, rgba(255, 205, 95, 0.9) 0%, transparent 72%),
radial-gradient(17% 24% at 86% 84%, rgba(255, 145, 40, 0.9) 0%, transparent 74%),
radial-gradient(16% 30% at 6% 40%, rgba(255, 160, 50, 0.75) 0%, transparent 76%),
radial-gradient(16% 30% at 95% 46%, rgba(255, 170, 60, 0.75) 0%, transparent 76%),
radial-gradient(30% 18% at 44% 8%, rgba(255, 120, 30, 0.6) 0%, transparent 78%);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: exclude;
padding: 46px;
animation: pc-edge-gutter 3.6s ease-in-out infinite alternate;
}
.pc-reveal-root[data-pc-edge="flame"] .pc-prize-edge::after {
content: "";
position: absolute;
inset: -34px;
padding: 34px;
opacity: 0.8;
filter: blur(8px);
background:
radial-gradient(20% 26% at 24% 88%, rgba(255, 245, 200, 0.9) 0%, transparent 72%),
radial-gradient(17% 22% at 74% 90%, rgba(255, 175, 60, 0.9) 0%, transparent 74%),
radial-gradient(14% 24% at 50% 6%, rgba(255, 200, 90, 0.6) 0%, transparent 76%);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: exclude;
animation: pc-edge-gutter 5.3s ease-in-out infinite alternate-reverse;
}
/* Fire changes shape as it moves. Scale and skew rather than translate — a
layer that only slides reads as a texture dragged past a window. */
@keyframes pc-edge-gutter {
0% {
transform: scaleY(1) skewX(0deg);
opacity: 0.8;
}
50% {
transform: scaleY(1.16) skewX(2.5deg);
opacity: 1;
}
100% {
transform: scaleY(0.94) skewX(-2.5deg);
opacity: 0.85;
}
}
/* The hot line breathes with the tongues, so the frame looks like it is
feeding them rather than being lit separately. */
@keyframes pc-edge-heat {
from {
box-shadow:
0 0 3px 1px rgba(255, 224, 160, 0.9),
0 0 12px 2px rgba(255, 150, 50, 0.7),
0 0 34px 6px rgba(255, 95, 20, 0.38),
inset 0 0 10px rgba(255, 175, 75, 0.45);
}
to {
box-shadow:
0 0 5px 1px rgba(255, 240, 200, 1),
0 0 20px 4px rgba(255, 160, 60, 0.9),
0 0 54px 12px rgba(255, 95, 20, 0.55),
inset 0 0 16px rgba(255, 185, 90, 0.65);
}
}
/* ---- sparks ---------------------------------------------------------------
Individual embers and small stars drifting around the card.
The previous version used rotating conic gradients, and that could never
have worked: every stop in a conic spans the full radius, so what it draws
is arc SEGMENTS — which is exactly the cropped-beam look it had, and the
same primitive the beam treatment already owns.
Real particles need a real scatter, so these are SVG tiles of individually
placed marks (mostly round embers, some four-point stars, weighted small)
used as a mask over a warm gradient — the same technique as the holo star
fields. Two fields at different scales and drift speeds, each twinkling on
its own period, so nothing pulses together. */
.pc-reveal-root[data-pc-edge="sparks"] .pc-prize-edge {
box-shadow:
0 0 2px rgba(255, 226, 170, 0.55),
0 0 26px -4px color-mix(in srgb, var(--pc-tier-glow) 60%, transparent);
}
.pc-reveal-root[data-pc-edge="sparks"] .pc-prize-edge > span,
.pc-reveal-root[data-pc-edge="sparks"] .pc-prize-edge::after {
content: "";
position: absolute;
inset: -40px;
padding: 40px;
border-radius: 52px;
background:
radial-gradient(60% 60% at 50% 50%, rgba(255, 236, 190, 0.95) 0%, transparent 70%),
linear-gradient(
160deg,
color-mix(in srgb, var(--pc-tier-glow) 70%, #ffd9a0),
#fff3da 45%,
color-mix(in srgb, var(--pc-tier-color) 60%, #ffc27a)
);
filter: blur(0.6px);
}
.pc-reveal-root[data-pc-edge="sparks"] .pc-prize-edge > span {
-webkit-mask:
var(--pc-field-7) 0 0 / 150px 150px,
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: source-in, xor;
mask:
var(--pc-field-7) 0 0 / 150px 150px,
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: intersect, exclude;
animation:
pc-spark-drift 34s linear infinite,
pc-spark-twinkle 5.2s ease-in-out infinite alternate;
}
.pc-reveal-root[data-pc-edge="sparks"] .pc-prize-edge::after {
opacity: 0.7;
-webkit-mask:
var(--pc-field-8) 0 0 / 96px 96px,
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: source-in, xor;
mask:
var(--pc-field-8) 0 0 / 96px 96px,
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: intersect, exclude;
animation:
pc-spark-drift 53s linear infinite reverse,
pc-spark-twinkle 8.1s ease-in-out infinite alternate-reverse;
}
/* Drift moves the mask, not the element: translating the element would slide
the warm gradient with it and the colour would visibly travel. Moving only
the mask means the embers move THROUGH a stationary light, which is how a
real ember field behaves. */
@keyframes pc-spark-drift {
to {
-webkit-mask-position: 150px -150px, 0 0, 0 0;
mask-position: 150px -150px, 0 0, 0 0;
}
}
@keyframes pc-spark-twinkle {
from {
opacity: 0.55;
}
to {
opacity: 1;
}
}
/* The outward bloom. A child of .pc-prize-tilt would be clipped by its
overflow, but the tilt's OWN box-shadow is not — so light beyond the card
comes from here. */
.pc-reveal-root[data-pc-edge="beam"] .pc-prize-tilt {
box-shadow:
0 22px 48px -18px rgba(0, 0, 0, 0.95),
0 0 34px -6px color-mix(in srgb, var(--pc-tier-glow) 85%, transparent);
}
.pc-reveal-root[data-pc-edge="flame"] .pc-prize-tilt {
box-shadow:
0 22px 48px -18px rgba(0, 0, 0, 0.95),
0 6px 40px -6px rgba(255, 140, 40, 0.75),
0 0 70px -10px rgba(255, 90, 20, 0.55);
}
.pc-reveal-root[data-pc-edge="sparks"] .pc-prize-tilt {
box-shadow:
0 22px 48px -18px rgba(0, 0, 0, 0.95),
0 0 40px -10px color-mix(in srgb, var(--pc-tier-glow) 70%, transparent);
}
/* Reduced motion keeps the treatment and stops the travel: the merchant chose
an edge, and the preference is about movement, not decoration. */
@media (prefers-reduced-motion: reduce) {
.pc-prize-edge,
.pc-prize-edge > span,
.pc-prize-edge::after {
animation: none;
}
}
/* A hairline inner frame with the tier's own light bleeding in from the
edges — the glowing border the reference cards carry, drawn as light
rather than as a thick colored stroke. Sits above the foil layers so the
card always has a defined edge, whatever the sheen is doing. */
.pc-prize-frame {
position: absolute;
inset: 0;
z-index: 2;
border-radius: inherit;
pointer-events: none;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.45),
inset 0 0 22px -6px color-mix(in srgb, var(--pc-tier-glow) 85%, #ffffff),
inset 0 0 0 3px color-mix(in srgb, var(--pc-tier-color) 45%, transparent);
}
/* ------------------------------------------------- stage preset: pedestal */
/* The lit summoning platform the card rises off — the single biggest reason
the reference composition reads as a PLACE rather than a card on a
wallpaper. Built as concentric ellipses (not a circle squashed by a 3D
rotate, which would drag the card's own perspective around with it): a
soft ground-glow disc, a bright rim, an inner hairline, and a ring of rune
ticks masked to a thin elliptical annulus. Sits behind the card in DOM
order so the card's bottom edge overlaps it and the two read as one
object. */
.pc-prize-plinth {
/* Sized off --pc-card-w rather than in percentages of the stage, because
the rune ring below needs to know its own width-to-height ratio as a
NUMBER to squash a rotating circle into this ellipse. Keep these three
in step: --pc-plinth-squash is height ÷ width. */
/* 1.55x the card, not 2.15x, and hard-capped to the viewport: at the old
width the ellipse ran past both edges of a phone and got clipped to two
disconnected arcs — a platform you can't see the ends of doesn't read as
a platform. Height is DERIVED from the final width so the squash factor
stays a single constant no matter which of the two terms wins. */
--pc-plinth-w: min(calc(var(--pc-card-w) * 1.55), 88vw);
--pc-plinth-squash: 0.303;
--pc-plinth-h: calc(var(--pc-plinth-w) * var(--pc-plinth-squash));
position: absolute;
left: 50%;
/* Sunk below the card's own bottom edge, not centred behind it: the card
has to read as STANDING on the platform, and a ring whose top arc cuts
across the artwork reads as a hoop hung in front of it instead. */
bottom: calc(var(--pc-plinth-h) * -0.48);
width: var(--pc-plinth-w);
height: var(--pc-plinth-h);
transform: translateX(-50%);
display: none;
pointer-events: none;
}
.pc-reveal-root[data-pc-preset="pedestal"] .pc-prize-plinth {
display: block;
}
.pc-plinth-glow,
.pc-plinth-ring {
position: absolute;
inset: 0;
border-radius: 50%;
}
.pc-plinth-glow {
background: radial-gradient(
closest-side ellipse at 50% 50%,
color-mix(in srgb, var(--pc-tier-glow) 62%, transparent),
color-mix(in srgb, var(--pc-tier-glow) 18%, transparent) 55%,
transparent 78%
);
filter: blur(6px);
animation: pc-aura-breathe 5s ease-in-out infinite;
}
.pc-plinth-ring {
border: 1px solid color-mix(in srgb, var(--pc-tier-glow) 75%, #ffffff);
box-shadow:
0 0 26px -8px var(--pc-tier-glow),
inset 0 0 30px -12px var(--pc-tier-glow);
}
.pc-plinth-ring--inner {
inset: 13% 17%;
opacity: 0.55;
}
/* The rune ticks, and the one piece here that has to be projected rather
than merely drawn.
*
* Rotating the ellipse itself is what the first version did, and it was
* wrong in a way that only shows up once it moves: an ellipse rotated about its
* centre sweeps its own long axis around, so the "floor" appears to tumble
* — it lines up at 0deg and looks broken everywhere else. A ring lying flat
* on the ground has to keep its projection FIXED while the marks travel
* around it, slowing as they cross the near and far edges.
*
* The fix is two elements: an outer wrapper that only squashes (never
* rotates), holding a perfectly SQUARE child that only rotates (never
* squashes). Rotating a circle and then flattening it gives exactly the
* foreshortening a real ring has, with a transform-only animation — no
* per-frame gradient repaint, and no 3D transform that would fight the
* card's own perspective a few pixels away. */
.pc-plinth-disc {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: var(--pc-plinth-w);
transform: translateY(-50%) scaleY(var(--pc-plinth-squash));
}
.pc-plinth-runes {
position: absolute;
inset: 4%;
border-radius: 50%;
background: repeating-conic-gradient(
from 0deg,
color-mix(in srgb, var(--pc-tier-glow) 85%, #ffffff) 0deg 1.5deg,
transparent 1.5deg 7.5deg
);
-webkit-mask-image: radial-gradient(circle, transparent 76%, #000 82%, #000 95%, transparent 100%);
mask-image: radial-gradient(circle, transparent 76%, #000 82%, #000 95%, transparent 100%);
opacity: 1;
animation: pc-sigil-turn 46s linear infinite;
}
/* The platform carries the drama in this preset, so the rays behind the card
step back — two full-strength light sources fighting each other is what
makes a composition read as noise rather than as a set. */
.pc-reveal-root[data-pc-preset="pedestal"] .pc-prize-rays {
opacity: 0.22;
}
.pc-reveal-root[data-pc-preset="pedestal"] .pc-prize-stage {
margin-bottom: clamp(26px, 6vh, 52px);
}
/* ---------------------------------------------------- stage preset: halo */
.pc-reveal-root[data-pc-preset="halo"] .pc-prize-rays {
opacity: 0.42;
}
.pc-reveal-root[data-pc-preset="halo"] .pc-prize-glow {
opacity: 0.68;
}
/* ------------------------------------------------- stage preset: minimal */
/* Everything decorative off. Not a lesser version of the other two — it's
the one to pick when the card art IS the drama and a merchant wants
nothing else in the frame competing with it. */
.pc-reveal-root[data-pc-preset="minimal"] .pc-prize-rays,
.pc-reveal-root[data-pc-preset="minimal"] .pc-prize-plinth {
display: none;
}
.pc-reveal-root[data-pc-preset="minimal"] .pc-stage-rays {
opacity: 0.05;
}
.pc-reveal-root[data-pc-preset="minimal"].pc-beat-prize .pc-stage-rays {
opacity: 0.07;
}
.pc-reveal-root[data-pc-preset="minimal"] .pc-prize-glow {
opacity: 0.34;
}
.pc-reveal-root[data-pc-preset="minimal"] .pc-prize-headline {
font-weight: 700;
letter-spacing: 0.1em;
text-shadow: 0 0 24px color-mix(in srgb, var(--pc-tier-glow) 45%, transparent);
}
.pc-prize-info {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
/* ===========================================================================
THE RARITY BANNER — the one element that answers "did I pull something
precious" before the buyer has read a single word.
It used to be one small pill, identical at every tier with only the hue
swapped. Hue alone cannot carry escalation here, because the four colours
are the MERCHANT's: a shop whose base is hot pink and whose legendary is
navy would read backwards. So the ladder is built from STRUCTURE, and the
colour rides on top of it:
base one flat plate, flush edge, no glow. Deliberately plain -- if
the floor is not quiet, nothing above it can feel like a lift.
rare + a rim around the plate, + a soft aura.
epic + a heavier rim and a brighter aura.
legendary + a heavier rim again, a sheen that sweeps the plate, and an
aura that breathes.
Every step ADDS to the silhouette rather than restyling it, which is what
makes the four legible as a sequence when a buyer only ever sees one.
TWO ELEMENTS, NO NEGATIVE Z-INDEX, and that is not a style preference. The
first build stacked two absolutely-positioned pseudo-elements at z-index -1
and -2 to get the plate and its rim. The ::after silently ignored its own
clip-path -- measured in the harness by rendering it solid green with the
clip on and off, which produced the identical rectangle both times -- so
the "rim" painted as a hard box behind the banner. The badge now carries
the outer chevron itself, ::before is the inner plate, and the label sits
in its own span above both. Every layer is in normal paint order.
Ink still comes from `--pc-tier-ink` (see the driver's tierInk): this is
the one surface putting small tight-tracked text directly on a
merchant-chosen colour, and a fixed light ink failed AA at 1.96:1 on
legendary amber. Do not replace it with a literal.
=========================================================================== */
.pc-prize-tier-badge {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 172px;
padding: 10px 34px;
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
line-height: 1;
color: var(--pc-tier-ink);
border-radius: 0;
box-shadow: none;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
/* Pointed ends read as a ribbon or an award; a rounded pill reads as a tag. */
clip-path: polygon(
16px 0, calc(100% - 16px) 0, 100% 50%,
calc(100% - 16px) 100%, 16px 100%, 0 50%
);
/* The rim. Base overrides this to transparent, so the plate below sits
flush and the floor stays flat. */
background: color-mix(in srgb, var(--pc-tier-color) 46%, #05060d);
}
/* The plate the text sits on, inset far enough that the rim reads on the
diagonals as well as the flat edges. */
.pc-prize-tier-badge::before {
content: "";
position: absolute;
inset: 3px 11px;
clip-path: polygon(
13px 0, calc(100% - 13px) 0, 100% 50%,
calc(100% - 13px) 100%, 13px 100%, 0 50%
);
background:
/* Sheen. Parked off the left edge and only moved by the legendary rule,
so every tier shares one plate definition. */
linear-gradient(
100deg,
transparent 38%,
rgba(255, 255, 255, 0.42) 50%,
transparent 62%
),
/* Top-lit bevel, so the plate reads as metal rather than as a flat swatch
of the merchant's colour. */
linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 52%),
linear-gradient(150deg, var(--pc-tier-color), var(--pc-tier-color-to));
background-size: 220% 100%, auto, auto;
background-position: -60% 0, 0 0, 0 0;
background-repeat: no-repeat;
}
/* Above the plate. Positioned rather than z-indexed: ::before is a positioned
box, so plain text would paint under it. */
.pc-prize-tier-text {
position: relative;
}
/* ---- the ladder ---------------------------------------------------------- */
/* base: no rim, no aura. The floor. */
[data-pc-tier="base"] .pc-prize-tier-badge {
background: transparent;
}
[data-pc-tier="base"] .pc-prize-tier-badge::before {
inset: 0;
clip-path: polygon(
16px 0, calc(100% - 16px) 0, 100% 50%,
calc(100% - 16px) 100%, 16px 100%, 0 50%
);
}
/* WIDE BLUR, LOW ALPHA. A tight, saturated drop-shadow under a shape this
wide and this short does not read as a glow -- it reads as a grey box
sitting behind the banner. The aura has to be broader than the banner is
tall to read as light. drop-shadow, not box-shadow: it follows the
clip-path, where a box-shadow would draw a rectangle around a chevron. */
[data-pc-tier="rare"] .pc-prize-tier-badge {
filter: drop-shadow(0 4px 18px color-mix(in srgb, var(--pc-tier-glow) 32%, transparent));
}
[data-pc-tier="epic"] .pc-prize-tier-badge {
padding: 11px 36px;
filter: drop-shadow(0 5px 28px color-mix(in srgb, var(--pc-tier-glow) 46%, transparent));
}
[data-pc-tier="epic"] .pc-prize-tier-badge::before {
inset: 4px 13px;
}
[data-pc-tier="legendary"] .pc-prize-tier-badge {
min-width: 190px;
padding: 12px 38px;
font-size: 0.78rem;
animation: pc-tier-aura 2.8s ease-in-out infinite;
}
[data-pc-tier="legendary"] .pc-prize-tier-badge::before {
inset: 5px 15px;
animation: pc-tier-sheen 3.6s ease-in-out 0.6s infinite;
}
@keyframes pc-tier-aura {
0%, 100% {
filter: drop-shadow(0 5px 30px color-mix(in srgb, var(--pc-tier-glow) 52%, transparent));
}
50% {
filter: drop-shadow(0 5px 46px color-mix(in srgb, var(--pc-tier-glow) 74%, transparent));
}
}
/* Only the sheen layer moves; the bevel and the fill are pinned by `auto`. */
@keyframes pc-tier-sheen {
0%, 62%, 100% { background-position: -60% 0, 0 0, 0 0; }
92% { background-position: 160% 0, 0 0, 0 0; }
}
/* The banner is a signal, not an animation. Reduced motion keeps every layer
and the full aura, and simply stops them moving. */
@media (prefers-reduced-motion: reduce) {
[data-pc-tier="legendary"] .pc-prize-tier-badge,
[data-pc-tier="legendary"] .pc-prize-tier-badge::before {
animation: none;
}
[data-pc-tier="legendary"] .pc-prize-tier-badge {
filter: drop-shadow(0 5px 34px color-mix(in srgb, var(--pc-tier-glow) 62%, transparent));
}
}
.pc-prize-name {
margin: 2px 0 0;
font-family: var(--pc-display);
font-size: 1.15rem;
font-weight: 700;
letter-spacing: -0.01em;
}
.pc-prize-meta {
font-size: 0.8rem;
color: rgba(244, 244, 248, 0.82);
}
/* rarium-condition-icons.js's conditionChipHtml SVG has no width/height
of its own (only a viewBox) — with nothing constraining it here, a bare
inline