/* Garden State Gridlock's leaderboard flair, on its own since 4.79.1 so Beats To Beats (frontend/games/beats) wears the same names: both games link this file, and flair.js draws the names. A new colour or effect goes here (and gridlock.py FLAIR) and turns up in both. Uses --yellow and --led from the page's :root. */ /* ---- The Ticket Machine's leaderboard flair (gridlock.py FLAIR; app.js flairName) ---- A name in flair is .flair[data-fc][data-fe] > .fl-t. data-fc paints the letters (--fc a colour, or --fg a gradient clipped to them); data-fe draws around them with ::before/::after and filters on .fl-t. The padding, taken back by a negative margin, gives a glow or a sparkle room inside a name's ellipsis clip without moving anything. Nothing here changes a row's height, and every animation stops for reduced motion. */ .flair{position:relative;display:inline-block;max-width:calc(100% + 14px);padding:3px 7px;margin:-3px -7px;vertical-align:middle} .flair[data-fc] .fl-t{color:var(--fc,currentColor);background-image:var(--fg,none);background-size:var(--fs,100% 100%);-webkit-background-clip:text;background-clip:text} /* A colour's motion (--fca) and an effect's (--fea) both run on the letters, so a moving paint keeps moving under a pulsing or flickering effect. Colours move only the background (and filter the .flair itself); effects move the filter or transform of .fl-t. */ .flair .fl-t{animation:var(--fca,none),var(--fea,none)} /* Common: plain paints */ [data-fc="tomato"]{--fc:#ff5a4e} [data-fc="cone"]{--fc:#ff8a2a} [data-fc="corn"]{--fc:#ffe14d} [data-fc="garden"]{--fc:#3ddc84} [data-fc="shore"]{--fc:#4fd8ff} [data-fc="taffy"]{--fc:#ff7ab8} [data-fc="turnpike"]{--fc:#b07cff} [data-fc="pearl"]{--fc:#f7f3e6} [data-fc="barnegat"]{--fc:#2fd1b8} [data-fc="peach"]{--fc:#ffb38a} /* Uncommon: two-tone */ [data-fc="sunrise"]{--fc:transparent;--fg:linear-gradient(90deg,#ff8a2a,#ff7ab8)} [data-fc="boardwalk"]{--fc:transparent;--fg:linear-gradient(90deg,#ffb627,#ffd9b0)} [data-fc="pinelands"]{--fc:transparent;--fg:linear-gradient(90deg,#3ddc84,#2fd1b8)} [data-fc="skyline"]{--fc:transparent;--fg:linear-gradient(90deg,#4fd8ff,#b07cff)} [data-fc="cranberry"]{--fc:transparent;--fg:linear-gradient(90deg,#ff4d5e,#ff9ac8)} [data-fc="tidepool"]{--fc:transparent;--fg:linear-gradient(90deg,#4fd8ff,#3ddc84)} /* Rare: metal */ [data-fc="chrome"]{--fc:transparent;--fg:linear-gradient(180deg,#ffffff 0%,#d9e0ee 40%,#7d889e 52%,#eef2fa 100%)} [data-fc="brass"]{--fc:transparent;--fg:linear-gradient(180deg,#fff1b8 0%,#ffcf4a 40%,#a8741a 55%,#ffe08a 100%)} /* Epic and up: paints that move (the gradient ends where it starts, and slides one whole tile per loop) */ [data-fc="sunset"]{--fc:transparent;--fs:200% 100%;--fg:linear-gradient(90deg,#ff5a4e,#ffb627,#ff7ab8,#b07cff,#ff5a4e)} [data-fc="rainbow"]{--fc:transparent;--fs:200% 100%;--fg:linear-gradient(90deg,#ff4d5e,#ff8a2a,#ffe14d,#3ddc84,#4fd8ff,#6f7bff,#b07cff,#ff4d5e)} [data-fc="golden"]{--fc:transparent;--fs:200% 100%;--fg:linear-gradient(105deg,#b07412 0%,#ffdf1a 22%,#fffbd0 32%,#ffdf1a 42%,#b07412 50%,#ffdf1a 72%,#fffbd0 82%,#ffdf1a 92%,#b07412 100%);filter:drop-shadow(0 0 3px rgba(255,214,60,.55))} [data-fc="sunset"]{--fca:fl-slide 5s linear infinite} [data-fc="rainbow"]{--fca:fl-slide 3s linear infinite} [data-fc="golden"]{--fca:fl-slide 2.6s linear infinite} @keyframes fl-slide{to{background-position:-200% 0}} /* Uncommon effects */ [data-fe="laneline"]::after{content:"";position:absolute;left:7px;right:7px;bottom:1px;height:2px;background:repeating-linear-gradient(90deg,var(--yellow) 0 6px,transparent 6px 10px)} [data-fe="greenlight"]{padding-left:17px} [data-fe="greenlight"]::before{content:"";position:absolute;left:6px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#3ddc84;box-shadow:0 0 6px #3ddc84} /* Rare effects */ [data-fe="headlight"] .fl-t{filter:drop-shadow(0 0 3px rgba(255,246,200,.95)) drop-shadow(0 0 6px rgba(255,214,120,.5))} [data-fe="outline"] .fl-t{filter:drop-shadow(0 0 1px #4fd8ff) drop-shadow(0 0 1px #4fd8ff) drop-shadow(0 0 4px rgba(79,216,255,.7))} [data-fe="shadow"] .fl-t{filter:drop-shadow(1px 1px 0 #000) drop-shadow(2px 2px 0 rgba(0,0,0,.6)) drop-shadow(3px 3px 0 rgba(0,0,0,.35))} [data-fe="sparkle"]::before,[data-fe="sparkle"]::after,[data-fe="twinkle"]::before,[data-fe="twinkle"]::after{position:absolute;font-size:9px;line-height:1;color:#fff4b0;text-shadow:0 0 4px #ffd23f;pointer-events:none} [data-fe="sparkle"]::before,[data-fe="twinkle"]::before{content:"✦";top:0;left:1px} [data-fe="sparkle"]::after,[data-fe="twinkle"]::after{content:"✧";bottom:0;right:1px} /* Epic effects */ [data-fe="twinkle"]::before{animation:fl-twinkle 1.6s ease-in-out infinite} [data-fe="twinkle"]::after{animation:fl-twinkle 1.6s ease-in-out .8s infinite} @keyframes fl-twinkle{0%,100%{opacity:.15;transform:scale(.6)}50%{opacity:1;transform:scale(1.25)}} [data-fe="shimmer"]::after{content:"";position:absolute;inset:4px 7px;pointer-events:none;mix-blend-mode:screen;background:linear-gradient(100deg,transparent 44%,rgba(255,255,255,.32) 50%,transparent 56%) no-repeat;background-size:300% 100%;animation:fl-sweep 2.8s ease-in-out infinite} @keyframes fl-sweep{from{background-position:100% 0}to{background-position:-50% 0}} [data-fe="pulse"]{--fea:fl-pulse 1.8s ease-in-out infinite} @keyframes fl-pulse{0%,100%{filter:drop-shadow(0 0 0 rgba(255,182,39,0))}50%{filter:drop-shadow(0 0 5px rgba(255,182,39,.95))}} [data-fe="hazards"]{padding-left:15px;padding-right:15px} [data-fe="hazards"]::before,[data-fe="hazards"]::after{content:"";position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--led);box-shadow:0 0 6px var(--led);animation:fl-blink 1s steps(1) infinite} [data-fe="hazards"]::before{left:5px} [data-fe="hazards"]::after{right:5px;animation-delay:.5s} @keyframes fl-blink{50%{opacity:.15;box-shadow:none}} /* Legendary effects */ [data-fe="fireworks"]::before,[data-fe="fireworks"]::after{content:"";position:absolute;top:2px;width:2px;height:2px;border-radius:50%;pointer-events:none; box-shadow:0 -6px #ffd23f,4px -4px #ff7ab8,6px 0 #4fd8ff,4px 4px #3ddc84,0 6px #ffd23f,-4px 4px #ff7ab8,-6px 0 #4fd8ff,-4px -4px #3ddc84;animation:fl-burst 2.2s ease-out infinite} [data-fe="fireworks"]::before{left:4px} [data-fe="fireworks"]::after{right:4px;animation-delay:1.1s} @keyframes fl-burst{0%{transform:scale(.2);opacity:0}15%{opacity:1}70%{transform:scale(1);opacity:.9}100%{transform:scale(1.2);opacity:0}} [data-fe="neon"]{--fea:fl-flicker 4s linear infinite} [data-fe="neon"] .fl-t{filter:drop-shadow(0 0 2px #ff7ab8) drop-shadow(0 0 5px rgba(255,122,184,.8))} @keyframes fl-flicker{0%,18%,22%,25%,53%,57%,100%{opacity:1}20%,24%,55%{opacity:.35}} /* Mythical effect: the name pulls in with speed lines streaming behind it */ [data-fe="express"]{padding-left:20px} [data-fe="express"]::before{content:"";position:absolute;left:2px;top:5px;bottom:5px;width:16px;pointer-events:none; background:repeating-linear-gradient(180deg,rgba(79,216,255,.95) 0 2px,transparent 2px 4px);-webkit-mask:linear-gradient(90deg,transparent,#000);mask:linear-gradient(90deg,transparent,#000);animation:fl-lines .45s linear infinite} [data-fe="express"]{--fea:fl-arrive .7s cubic-bezier(.2,.9,.3,1.2) both} [data-fe="express"] .fl-t{display:inline-block} @keyframes fl-lines{0%{transform:translateX(4px)}100%{transform:translateX(-4px)}} @keyframes fl-arrive{from{transform:translateX(-18px) skewX(-12deg);opacity:0}to{transform:none;opacity:1}} /* ---- 4.16.0: fifty more ---- */ /* Common paints */ [data-fc="berry"]{--fc:#6f7bff} [data-fc="porkroll"]{--fc:#ffa3b5} [data-fc="mint"]{--fc:#9af5d0} [data-fc="lime"]{--fc:#b8f040} [data-fc="devil"]{--fc:#ff2a3f} [data-fc="sand"]{--fc:#e9cc8f} [data-fc="violet"]{--fc:#d36bff} [data-fc="ice"]{--fc:#bfe6ff} [data-fc="barrier"]{--fc:#aab3c2} [data-fc="rust"]{--fc:#d9773f} /* Common effects: a mark before the name */ [data-fe="star"],[data-fe="barrel"]{padding-left:17px} [data-fe="star"]::before{content:"★";position:absolute;left:5px;top:50%;margin-top:-.55em;font-size:10px;line-height:1.1;color:#ffd23f;pointer-events:none} [data-fe="barrel"]::before{content:"";position:absolute;left:6px;top:50%;width:7px;height:10px;margin-top:-5px;border-radius:2px;pointer-events:none;background:repeating-linear-gradient(180deg,#ff8a2a 0 2px,#f7f3e6 2px 4px)} /* Uncommon paints: two-tone */ [data-fc="taylorham"]{--fc:transparent;--fg:linear-gradient(90deg,#ff8f8f,#ffe680)} [data-fc="lighthouse"]{--fc:transparent;--fg:linear-gradient(180deg,#ff4d5e 0 36%,#f7f3e6 36% 64%,#ff4d5e 64%)} [data-fc="meadowlands"]{--fc:transparent;--fg:linear-gradient(90deg,#9ccf5a,#d9b77a)} [data-fc="candy"]{--fc:transparent;--fg:linear-gradient(90deg,#ff9ad5,#9ad5ff)} [data-fc="fudge"]{--fc:transparent;--fg:linear-gradient(90deg,#c8834a,#ffe0b8)} [data-fc="asbury"]{--fc:transparent;--fg:linear-gradient(90deg,#ff4fd8,#4fffe9)} /* Uncommon effects: road furniture */ [data-fe="tolltag"]{padding-left:20px} [data-fe="tolltag"]::before{content:"";position:absolute;left:5px;top:50%;width:11px;height:8px;margin-top:-4px;border-radius:2px;pointer-events:none; background:linear-gradient(#f7f3e6,#f7f3e6) 2px 2px/7px 1.5px no-repeat,#7a5cff} [data-fe="signal"]{padding-left:16px} [data-fe="signal"]::before{content:"";position:absolute;left:5px;top:50%;width:6px;height:15px;margin-top:-7.5px;border-radius:2px;pointer-events:none;box-shadow:0 0 0 1px #3a4670; background:radial-gradient(circle at 3px 2.5px,#ff4d5e 1.6px,transparent 2px),radial-gradient(circle at 3px 7.5px,#ffb627 1.6px,transparent 2px),radial-gradient(circle at 3px 12.5px,#3ddc84 1.6px,transparent 2px),#0b1020} [data-fe="doubleyellow"]::after{content:"";position:absolute;left:7px;right:7px;bottom:0;height:4px;pointer-events:none; background:linear-gradient(var(--yellow),var(--yellow)) top/100% 1.5px no-repeat,linear-gradient(var(--yellow),var(--yellow)) bottom/100% 1.5px no-repeat} [data-fe="crosswalk"]::after{content:"";position:absolute;left:7px;right:7px;bottom:0;height:3px;pointer-events:none;background:repeating-linear-gradient(90deg,#f7f3e6 0 4px,transparent 4px 8px)} [data-fe="milepost"]{padding-right:19px} [data-fe="milepost"]::after{content:"";position:absolute;right:6px;top:50%;width:8px;height:12px;margin-top:-6px;border-radius:1.5px;pointer-events:none; background:linear-gradient(#f7f3e6,#f7f3e6) 2px 3px/4px 1.5px no-repeat,linear-gradient(#f7f3e6,#f7f3e6) 2px 7px/4px 1.5px no-repeat,#13804a;box-shadow:inset 0 0 0 1px #f7f3e6} [data-fe="checkered"]::after{content:"";position:absolute;left:7px;right:7px;bottom:0;height:4px;pointer-events:none;background:repeating-conic-gradient(#f7f3e6 0 25%,#0b1020 0 50%) 0 0/4px 4px} /* Rare paints: metal and stone */ [data-fc="liberty"]{--fc:transparent;--fg:linear-gradient(180deg,#e0fff3 0%,#7fe0c0 40%,#2f8f7a 55%,#a8f0d8 100%)} [data-fc="copper"]{--fc:transparent;--fg:linear-gradient(180deg,#ffe0c8 0%,#f0965a 40%,#8f4a20 55%,#ffc49a 100%)} [data-fc="pulaski"]{--fc:transparent;--fg:linear-gradient(180deg,#eef3fb 0%,#9fb3d2 40%,#46597c 55%,#c2d2ea 100%)} [data-fc="diamond"]{--fc:transparent;--fg:linear-gradient(120deg,#fff 0%,#cfe9ff 20%,#ffd9f5 38%,#fff 50%,#d9ffe9 64%,#fff3c4 80%,#fff 100%);filter:drop-shadow(0 0 2px rgba(255,255,255,.45))} /* Rare effects: light */ [data-fe="underglow"]::after{content:"";position:absolute;left:9px;right:9px;bottom:1px;height:2px;border-radius:2px;pointer-events:none;background:linear-gradient(90deg,#ff4fd8,#4fd8ff);box-shadow:0 0 6px 1px rgba(255,79,216,.6),0 0 6px 1px rgba(79,216,255,.5)} [data-fe="brakelights"] .fl-t{filter:drop-shadow(0 0 2px #ff2a3f) drop-shadow(0 0 6px rgba(255,42,63,.7))} [data-fe="snowcap"] .fl-t{filter:drop-shadow(0 -1.5px 0 #fff) drop-shadow(0 -1px 1px rgba(200,230,255,.8))} [data-fe="retro"] .fl-t{filter:drop-shadow(1.5px 1.5px 0 #ff4fd8) drop-shadow(1.5px 1.5px 0 #4fd8ff)} [data-fe="spotlight"]::before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(closest-side,rgba(255,240,190,.5),rgba(255,240,190,.2) 60%,transparent)} [data-fe="moon"]{padding-left:19px} [data-fe="moon"]::before{content:"";position:absolute;left:5px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;pointer-events:none;box-shadow:inset -3px 1px 0 #fff4c4;filter:drop-shadow(0 0 3px rgba(255,244,196,.8))} /* Epic paints that move */ [data-fc="aurora"]{--fc:transparent;--fs:200% 100%;--fg:linear-gradient(90deg,#3ddc84,#4fd8ff,#b07cff,#4fd8ff,#3ddc84);--fca:fl-slide 6s linear infinite} [data-fc="surf"]{--fc:transparent;--fs:200% 100%;--fg:linear-gradient(90deg,#2f8cff,#4fd8ff,#e8fbff,#4fd8ff,#2f8cff);--fca:fl-slide 3.5s linear infinite} [data-fc="ember"]{--fc:transparent;--fs:200% 100%;--fg:linear-gradient(90deg,#ff3b1f,#ff8a2a,#ffe14d,#ff8a2a,#ff3b1f);--fca:fl-slide 2.4s linear infinite;filter:drop-shadow(0 0 2px rgba(255,90,40,.55))} /* Epic effects */ [data-fe="glitch"]{--fea:fl-glitch 3s steps(1,end) infinite} @keyframes fl-glitch{0%,86%,100%{filter:drop-shadow(0 0 0 rgba(79,216,255,0)) drop-shadow(0 0 0 rgba(255,77,94,0))} 88%{filter:drop-shadow(-2px 0 0 #4fd8ff) drop-shadow(2px 0 0 #ff4d5e)}91%{filter:drop-shadow(2px 1px 0 #4fd8ff) drop-shadow(-2px -1px 0 #ff4d5e)} 94%{filter:drop-shadow(-1px 0 0 #4fd8ff) drop-shadow(3px 0 0 #ff4d5e)}97%{filter:drop-shadow(0 0 0 rgba(79,216,255,0)) drop-shadow(0 0 0 rgba(255,77,94,0))}} [data-fe="buoy"]{--fea:fl-bob 2.4s ease-in-out infinite} [data-fe="buoy"] .fl-t{display:inline-block} @keyframes fl-bob{0%,100%{transform:translateY(1px) rotate(-1.5deg)}50%{transform:translateY(-1.5px) rotate(1.5deg)}} [data-fe="storm"]{padding-left:16px;--fea:fl-lit 3.2s linear infinite} [data-fe="storm"]::before{content:"";position:absolute;left:5px;top:50%;width:8px;height:12px;margin-top:-6px;pointer-events:none;background:#ffe14d; clip-path:polygon(55% 0,0 58%,42% 58%,30% 100%,100% 38%,56% 38%,78% 0);animation:fl-strike 3.2s linear infinite} @keyframes fl-strike{0%,8%,15%,19%,100%{opacity:.45}9%,13%,17%{opacity:1}} @keyframes fl-lit{0%,8%,15%,19%,100%{filter:drop-shadow(0 0 0 rgba(230,240,255,0))}9%,13%,17%{filter:drop-shadow(0 0 5px rgba(230,240,255,.95))}} [data-fe="siren"]{--fea:fl-siren 1s steps(1,end) infinite} @keyframes fl-siren{0%{filter:drop-shadow(-3px 0 4px #ff2a3f)}50%{filter:drop-shadow(3px 0 4px #3b6bff)}} [data-fe="circle"]::before,[data-fe="circle"]::after{content:"";position:absolute;width:4px;height:4px;border-radius:50%;pointer-events:none;animation:fl-round 3s linear infinite} [data-fe="circle"]::before{background:#fffbe0;box-shadow:0 0 4px #fffbe0} [data-fe="circle"]::after{background:#ff4d5e;box-shadow:0 0 4px #ff4d5e;animation-delay:-1.5s} @keyframes fl-round{0%,100%{left:0;top:0}35%{left:calc(100% - 4px);top:0}50%{left:calc(100% - 4px);top:calc(100% - 4px)}85%{left:0;top:calc(100% - 4px)}} /* Legendary paints */ [data-fc="galaxy"]{--fc:transparent;--fs:23px 100%,31px 100%,200% 100%;--fca:fl-slide 8s linear infinite;filter:drop-shadow(0 0 3px rgba(176,124,255,.6)); --fg:radial-gradient(circle at 30% 30%,#fff 0 .7px,transparent 1.3px),radial-gradient(circle at 60% 72%,#fff 0 .7px,transparent 1.3px),linear-gradient(90deg,#6f7bff,#b07cff,#ff7ab8,#b07cff,#6f7bff)} [data-fc="holo"]{--fc:transparent;--fs:200% 100%;--fca:fl-slide 2.2s linear infinite;filter:drop-shadow(0 0 2px rgba(200,220,255,.6)); --fg:linear-gradient(115deg,#ff9ad5,#9ad5ff 20%,#b8ffd9 40%,#fff3a8 60%,#ffb3e6 80%,#ff9ad5)} /* Legendary effects */ [data-fe="flames"]{--fea:fl-heat .5s ease-in-out infinite alternate} [data-fe="flames"]::after{content:"";position:absolute;left:7px;right:7px;bottom:0;height:10px;pointer-events:none;mix-blend-mode:screen; background:radial-gradient(ellipse 45% 100% at 50% 100%,#fff3a0 0 12%,#ffb627 32%,rgba(255,59,31,.75) 58%,transparent 80%) 0 100%/7px 10px repeat-x;animation:fl-lick .4s steps(2,end) infinite} @keyframes fl-heat{from{filter:drop-shadow(0 -1px 2px #ff8a2a) drop-shadow(0 -2px 3px rgba(255,59,31,.5))}to{filter:drop-shadow(0 -2px 3px #ffb627) drop-shadow(0 -3px 5px rgba(255,59,31,.85))}} @keyframes fl-lick{50%{background-size:7px 7px}to{background-position:7px 100%;background-size:7px 10px}} [data-fe="confetti"]::before,[data-fe="confetti"]::after{content:"";position:absolute;top:0;width:2px;height:3px;pointer-events:none;animation:fl-fall 2s linear infinite} [data-fe="confetti"]::before{left:22%;background:#ffd23f;box-shadow:9px 2px #ff7ab8,-8px 5px #4fd8ff,18px 7px #3ddc84,-15px 1px #b07cff} [data-fe="confetti"]::after{left:66%;background:#ff4d5e;box-shadow:-9px 4px #4fd8ff,8px 1px #ffd23f,16px 6px #b07cff,-17px 2px #3ddc84;animation-delay:-1s} @keyframes fl-fall{from{transform:translateY(-3px) rotate(0);opacity:0}15%{opacity:1}80%{opacity:1}to{transform:translateY(16px) rotate(25deg);opacity:0}} [data-fe="prism"]{--fea:fl-prism 4s linear infinite} @keyframes fl-prism{0%,100%{filter:drop-shadow(0 0 3px #ff4d5e)}20%{filter:drop-shadow(0 0 3px #ffb627)}40%{filter:drop-shadow(0 0 3px #3ddc84)}60%{filter:drop-shadow(0 0 3px #4fd8ff)}80%{filter:drop-shadow(0 0 3px #b07cff)}} [data-fe="comet"]::after{content:"";position:absolute;top:2px;left:0;width:20px;height:2px;border-radius:2px;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(160,220,255,.6) 60%,#fff);box-shadow:8px 0 5px rgba(160,220,255,.8);animation:fl-comet 3.2s ease-in infinite} @keyframes fl-comet{0%{left:0;opacity:0}8%{opacity:1}55%{left:calc(100% - 20px);opacity:1}62%,100%{left:calc(100% - 20px);opacity:0}} /* Mythical paint: the letters lit dot by dot like NY Penn's departure board, a refresh line rolling down them */ [data-fc="board"]{--fc:transparent;--fs:2px 2px,100% 400%,100% 100%;--fca:fl-scan 2.8s linear infinite;filter:drop-shadow(0 0 3px rgba(255,182,39,.75)); --fg:radial-gradient(circle,#ffc44d 0 .75px,transparent 1px),linear-gradient(180deg,transparent 45%,rgba(255,244,214,.95) 50%,transparent 55%),linear-gradient(rgba(255,182,39,.45),rgba(255,182,39,.45))} @keyframes fl-scan{from{background-position:0 0,0 0%,0 0}to{background-position:0 0,0 100%,0 0}} /* Mythical effect: an overhead wire over the name, the pantograph's spark running along it, the name buzzing */ [data-fe="catenary"]{--fea:fl-zap 1.8s linear infinite} [data-fe="catenary"]::before{content:"";position:absolute;left:3px;right:3px;top:1px;height:1px;pointer-events:none;background:rgba(200,225,255,.7)} [data-fe="catenary"]::after{content:"";position:absolute;top:0;left:0;width:3px;height:3px;border-radius:50%;pointer-events:none;background:#fff; box-shadow:0 0 4px 1px #9ad5ff,0 0 9px 2px #4fd8ff,2px 4px 0 -.5px #fff4b0,-3px 6px 0 -.5px #ffe14d;animation:fl-arc 1.8s linear infinite} @keyframes fl-arc{0%{left:3px;opacity:1}30%{opacity:.4}34%{opacity:1}70%{opacity:.5}74%{opacity:1}100%{left:calc(100% - 6px);opacity:1}} @keyframes fl-zap{0%,28%,36%,68%,76%,100%{filter:drop-shadow(0 0 1px rgba(154,213,255,.6)) drop-shadow(0 0 0 rgba(255,255,255,0))}31%,33%,71%,73%{filter:drop-shadow(0 0 4px #9ad5ff) drop-shadow(0 0 1px #fff)}} /* ---- 4.17.0: fifty more again ---- */ /* Common paints */ [data-fc="lavender"]{--fc:#c9b3ff} [data-fc="mustard"]{--fc:#e8b923} [data-fc="flamingo"]{--fc:#ff3d9a} [data-fc="lemonice"]{--fc:#fff59a} [data-fc="sky"]{--fc:#8fc9ff} [data-fc="forest"]{--fc:#2fae6a} [data-fc="grape"]{--fc:#9a5cf0} [data-fc="denim"]{--fc:#6f95d8} /* Common effects: a mark beside the name, or a highlighter under it */ [data-fe="heart"],[data-fe="pin"]{padding-left:17px} [data-fe="heart"]::before{content:"♥\FE0E";position:absolute;left:5px;top:50%;margin-top:-.55em;font-size:11px;line-height:1.1;color:#ff4d7a;pointer-events:none} [data-fe="pin"]::before{content:"";position:absolute;left:6px;top:50%;width:8px;height:8px;margin-top:-6px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);pointer-events:none; background:radial-gradient(circle,#f7f3e6 0 1.3px,#ff4d5e 1.7px)} [data-fe="highlighter"]::before{content:"";position:absolute;left:5px;right:5px;bottom:4px;height:45%;border-radius:2px;pointer-events:none;mix-blend-mode:screen;background:rgba(255,225,77,.5)} [data-fe="route"]{padding-left:19px} [data-fe="route"]::before{content:"";position:absolute;left:5px;top:50%;width:10px;height:10px;margin-top:-5px;pointer-events:none;box-shadow:0 0 0 1px #f7f3e6; background:radial-gradient(circle,#f7f3e6 0 3px,transparent 3.5px),#0b1020} /* Uncommon paints: two-tone */ [data-fc="watermelon"]{--fc:transparent;--fg:linear-gradient(180deg,#ff5a7a 0 70%,#6be08a 70%)} [data-fc="creamsicle"]{--fc:transparent;--fg:linear-gradient(90deg,#ff9a3c,#fff3e0)} [data-fc="mermaid"]{--fc:transparent;--fg:linear-gradient(90deg,#2fd1b8,#b07cff)} [data-fc="lemonlime"]{--fc:transparent;--fg:linear-gradient(90deg,#fff59a,#b8f040)} [data-fc="twilight"]{--fc:transparent;--fg:linear-gradient(90deg,#ff9a3c,#6f7bff)} [data-fc="blueraz"]{--fc:transparent;--fg:linear-gradient(90deg,#4fd8ff,#6f7bff)} /* Uncommon effects: more road and rail */ [data-fe="railroad"]::after{content:"";position:absolute;left:7px;right:7px;bottom:0;height:4px;pointer-events:none; background:linear-gradient(#aab3c2,#aab3c2) top/100% 1px no-repeat,linear-gradient(#aab3c2,#aab3c2) bottom/100% 1px no-repeat,repeating-linear-gradient(90deg,#a8703f 0 2px,transparent 2px 5px)} [data-fe="pennant"]{padding-right:18px} [data-fe="pennant"]::after{content:"";position:absolute;right:5px;top:50%;width:9px;height:9px;margin-top:-5px;pointer-events:none;background:#ff4d5e;clip-path:polygon(0 0,100% 50%,0 100%)} [data-fe="cones"]{padding-left:15px;padding-right:15px} [data-fe="cones"]::before,[data-fe="cones"]::after{content:"";position:absolute;top:50%;width:7px;height:9px;margin-top:-4px;pointer-events:none; background:linear-gradient(#ff8a2a 0 35%,#f7f3e6 35% 58%,#ff8a2a 58%);clip-path:polygon(50% 0,100% 100%,0 100%)} [data-fe="cones"]::before{left:5px} [data-fe="cones"]::after{right:5px} [data-fe="chevrons"]{padding-right:22px} [data-fe="chevrons"]::after{content:"›››";position:absolute;right:5px;top:50%;margin-top:-.6em;font-size:13px;line-height:1.2;font-weight:700;letter-spacing:-2px;color:#ffb627;pointer-events:none} [data-fe="speedbump"]::after{content:"";position:absolute;left:7px;right:7px;bottom:0;height:3px;border-radius:2px;pointer-events:none;background:repeating-linear-gradient(45deg,#ffe14d 0 3px,#0b1020 3px 6px)} [data-fe="parking"]{padding-right:19px} [data-fe="parking"]::after{content:"P";position:absolute;right:5px;top:50%;width:11px;height:12px;margin-top:-6px;border-radius:2px;pointer-events:none; font-size:9px;line-height:12px;font-weight:700;text-align:center;color:#fff;background:#2f6bff} /* Rare paints: gems and rose gold */ [data-fc="rosegold"]{--fc:transparent;--fg:linear-gradient(180deg,#ffe8e0 0%,#f2a99a 40%,#a8645a 55%,#ffd0c4 100%)} [data-fc="sapphire"]{--fc:transparent;--fg:linear-gradient(160deg,#cfe0ff 0%,#4f7bff 35%,#1d3fb8 52%,#6f9bff 70%,#dce8ff 100%);filter:drop-shadow(0 0 2px rgba(79,123,255,.5))} [data-fc="emerald"]{--fc:transparent;--fg:linear-gradient(160deg,#d0ffe4 0%,#3ddc84 35%,#0f8a4a 52%,#5fe8a0 70%,#e0fff0 100%);filter:drop-shadow(0 0 2px rgba(61,220,132,.5))} [data-fc="ruby"]{--fc:transparent;--fg:linear-gradient(160deg,#ffd0d8 0%,#ff3d5e 35%,#a0102e 52%,#ff6a84 70%,#ffe0e6 100%);filter:drop-shadow(0 0 2px rgba(255,61,94,.5))} /* Rare effects: print and frames */ [data-fe="embossed"] .fl-t{filter:drop-shadow(0 -1px 0 rgba(255,255,255,.55)) drop-shadow(0 1.5px 0 rgba(0,0,0,.85))} [data-fe="comic"] .fl-t{filter:drop-shadow(1px 0 0 #0b1020) drop-shadow(-1px 0 0 #0b1020) drop-shadow(0 1px 0 #0b1020) drop-shadow(0 -1px 0 #0b1020) drop-shadow(2px 2px 0 #ffd23f)} [data-fe="frame"]::before{content:"";position:absolute;inset:0 2px;border:3px double #ffcf4a;border-radius:5px;pointer-events:none;box-shadow:0 0 4px rgba(255,207,74,.45)} [data-fe="stub"]::before{content:"";position:absolute;inset:1px 2px;border:1.5px dashed #ffb627;border-radius:4px;pointer-events:none} [data-fe="corners"]::before,[data-fe="corners"]::after{content:"";position:absolute;width:6px;height:6px;pointer-events:none;border:0 solid #f7f3e6} [data-fe="corners"]::before{top:0;left:2px;border-top-width:1.5px;border-left-width:1.5px} [data-fe="corners"]::after{bottom:0;right:2px;border-bottom-width:1.5px;border-right-width:1.5px} [data-fe="chill"] .fl-t{filter:drop-shadow(0 0 3px rgba(160,220,255,.95)) drop-shadow(0 0 7px rgba(79,216,255,.5))} /* Epic paints that move */ [data-fc="lava"]{--fc:transparent;--fs:100% 200%;--fg:linear-gradient(180deg,#ff3b1f,#ff8a2a,#ff4fd8,#ff8a2a,#ff3b1f);--fca:fl-rise 4s linear infinite} @keyframes fl-rise{to{background-position:0 200%}} [data-fc="oilslick"]{--fc:transparent;--fs:200% 100%;--fg:linear-gradient(90deg,#5a6bff,#2fd1b8,#b8f040,#ff7ab8,#b07cff,#5a6bff);--fca:fl-slide 4s linear infinite} /* Stop & Go: the whole name turns green, yellow, then red */ [data-fc="stoplight"]{--fc:transparent;--fs:100% 300%;--fg:linear-gradient(180deg,#3ddc84 0 33.4%,#ffd23f 33.4% 66.6%,#ff4d5e 66.6%);--fca:fl-stopgo 4.5s steps(1,end) infinite} @keyframes fl-stopgo{0%{background-position:0 0}45%{background-position:0 50%}60%,100%{background-position:0 100%}} /* Epic effects */ [data-fe="pothole"]{--fea:fl-pothole 3.4s ease-out infinite} [data-fe="pothole"] .fl-t,[data-fe="heartbeat"] .fl-t,[data-fe="burnout"] .fl-t{display:inline-block} @keyframes fl-pothole{0%,78%,100%{transform:none}81%{transform:translateY(3px) rotate(1deg)}85%{transform:translateY(-1.5px) rotate(-1deg)}89%{transform:translateY(.5px)}93%{transform:none}} [data-fe="heartbeat"]{--fea:fl-beat 1.6s ease-in-out infinite} @keyframes fl-beat{0%,40%,100%{transform:scale(1)}10%,30%{transform:scale(1.07)}20%{transform:scale(1)}} [data-fe="radar"]{padding-left:18px} [data-fe="radar"]::before,[data-fe="radar"]::after{content:"";position:absolute;left:6px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;box-sizing:border-box;pointer-events:none} [data-fe="radar"]::before{background:#3ddc84;box-shadow:0 0 4px #3ddc84} [data-fe="radar"]::after{border:1.5px solid #3ddc84;animation:fl-ping 1.6s ease-out infinite} @keyframes fl-ping{from{transform:scale(1);opacity:.9}to{transform:scale(3.6);opacity:0}} [data-fe="rain"]::before,[data-fe="rain"]::after{content:"";position:absolute;top:0;width:1px;height:5px;pointer-events:none;background:rgba(170,210,255,.85);animation:fl-rain .9s linear infinite} [data-fe="rain"]::before{left:25%;box-shadow:7px 3px rgba(170,210,255,.85),-9px 6px rgba(170,210,255,.85),15px 1px rgba(170,210,255,.85),-16px 4px rgba(170,210,255,.85)} [data-fe="rain"]::after{left:65%;box-shadow:-8px 4px rgba(170,210,255,.85),9px 1px rgba(170,210,255,.85),17px 5px rgba(170,210,255,.85),-15px 2px rgba(170,210,255,.85);animation-delay:-.45s} @keyframes fl-rain{from{transform:translate(2px,-6px) rotate(12deg);opacity:0}20%{opacity:1}to{transform:translate(-2px,16px) rotate(12deg);opacity:0}} [data-fe="fizz"]::before,[data-fe="fizz"]::after{content:"";position:absolute;bottom:0;width:2px;height:2px;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.85);animation:fl-fizz 1.6s ease-in infinite} [data-fe="fizz"]::before{left:25%;box-shadow:6px -2px rgba(255,255,255,.6),-7px -4px rgba(255,255,255,.6),13px -1px rgba(255,255,255,.6)} [data-fe="fizz"]::after{left:62%;box-shadow:-6px -3px rgba(255,255,255,.6),7px -1px rgba(255,255,255,.6),-13px -2px rgba(255,255,255,.6);animation-delay:-.8s} @keyframes fl-fizz{from{transform:translateY(2px);opacity:0}20%{opacity:1}to{transform:translateY(-16px);opacity:0}} /* Legendary paints */ [data-fc="opal"]{--fc:transparent;--fs:200% 100%;--fca:fl-slide 5s linear infinite;filter:drop-shadow(0 0 3px rgba(220,200,255,.6)); --fg:linear-gradient(110deg,#f5f0ff,#c9f0ff,#ffd9f0,#e0ffe9,#fff4d0,#f5f0ff)} [data-fc="mercury"]{--fc:transparent;--fs:200% 100%;--fca:fl-slide 2.4s linear infinite;filter:drop-shadow(0 1px 0 rgba(0,0,0,.5)); --fg:linear-gradient(100deg,#7d889e,#fff 15%,#aab3c2 30%,#eef2fa 50%,#7d889e 65%,#fff 80%,#7d889e)} [data-fc="plasma"]{--fc:transparent;--fs:200% 100%;--fca:fl-slide 1.6s linear infinite;filter:drop-shadow(0 0 4px rgba(176,124,255,.8)); --fg:linear-gradient(90deg,#b07cff,#4fd8ff,#ff4fd8,#4fd8ff,#b07cff)} /* Legendary effects */ [data-fe="marquee"]::before{content:"";position:absolute;inset:0 3px;pointer-events:none;animation:fl-chase .5s steps(1,end) infinite; background:radial-gradient(circle,#ffe9a0 0 1.1px,transparent 1.5px) 0 0/6px 3px repeat-x,radial-gradient(circle,rgba(255,182,39,.35) 0 1.1px,transparent 1.5px) 3px 0/6px 3px repeat-x, radial-gradient(circle,#ffe9a0 0 1.1px,transparent 1.5px) 3px 100%/6px 3px repeat-x,radial-gradient(circle,rgba(255,182,39,.35) 0 1.1px,transparent 1.5px) 0 100%/6px 3px repeat-x} @keyframes fl-chase{50%{background-position:3px 0,0 0,0 100%,3px 100%}} [data-fe="marquee"] .fl-t{filter:drop-shadow(0 0 3px rgba(255,214,120,.6))} [data-fe="fireflies"]::before,[data-fe="fireflies"]::after{content:"";position:absolute;width:3px;height:3px;border-radius:50%;pointer-events:none;background:#e8ff7a; box-shadow:0 0 4px 1px rgba(216,255,106,.8),14px 8px 3px rgba(232,255,122,.9)} [data-fe="fireflies"]::before{left:12%;top:2px;animation:fl-fly1 4s ease-in-out infinite} [data-fe="fireflies"]::after{left:58%;bottom:3px;animation:fl-fly2 5s ease-in-out infinite} @keyframes fl-fly1{0%,100%{transform:translate(0,0);opacity:.2}25%{transform:translate(8px,6px);opacity:1}50%{transform:translate(18px,2px);opacity:.3}75%{transform:translate(6px,-2px);opacity:1}} @keyframes fl-fly2{0%,100%{transform:translate(0,0);opacity:1}25%{transform:translate(-10px,-5px);opacity:.25}50%{transform:translate(-20px,-1px);opacity:1}75%{transform:translate(-7px,2px);opacity:.3}} [data-fe="burnout"]{padding-left:14px;--fea:fl-rev 2.6s linear infinite} [data-fe="burnout"]::before{content:"";position:absolute;left:2px;bottom:2px;width:8px;height:8px;border-radius:50%;pointer-events:none;background:rgba(220,225,235,.8);filter:blur(1px); box-shadow:-3px -4px 0 1px rgba(220,225,235,.65),4px -6px 0 0 rgba(220,225,235,.55);animation:fl-smoke 2.6s ease-out infinite} @keyframes fl-rev{0%,55%,75%,100%{transform:none}57%,61%,65%,69%,73%{transform:translateX(-1px)}59%,63%,67%,71%{transform:translateX(1px)}} @keyframes fl-smoke{0%,55%{opacity:0;transform:scale(.4)}65%{opacity:.9}100%{opacity:0;transform:translate(-4px,-4px) scale(1.6)}} /* Mythical paint: the torch's flame rising through the letters, sparks and all */ [data-fc="torch"]{--fc:transparent;--fs:9px 14px,100% 200%;--fca:fl-torch 1.8s linear infinite;filter:drop-shadow(0 0 4px rgba(255,140,40,.8)) drop-shadow(0 -2px 3px rgba(255,214,60,.5)); --fg:radial-gradient(circle at 40% 60%,#fffbe0 0 .7px,transparent 1.2px),linear-gradient(0deg,#ff3b1f,#ff8a2a 25%,#ffe14d 50%,#ff8a2a 75%,#ff3b1f)} @keyframes fl-torch{to{background-position:0 -28px,0 200%}} /* Mythical effect: Gridlock itself: stop-and-go traffic in a lane under the name, oncoming over it, brake lights on the name */ [data-fe="rushhour"]{--fea:fl-brake 3s ease-in-out infinite} [data-fe="rushhour"]::after{content:"";position:absolute;left:7px;right:7px;bottom:0;height:3px;border-radius:1px;pointer-events:none;animation:fl-crawl 3s ease-in-out infinite; background:linear-gradient(90deg,#ff4d5e 0 6px,transparent 6px 10px,#4fd8ff 10px 16px,transparent 16px 19px,#ffe14d 19px 25px,transparent 25px 30px,#3ddc84 30px 36px,transparent 36px 40px) 0 0/40px 3px repeat-x} [data-fe="rushhour"]::before{content:"";position:absolute;left:7px;right:7px;top:0;height:2px;border-radius:1px;pointer-events:none;opacity:.8;animation:fl-oncoming 3s ease-in-out infinite; background:linear-gradient(90deg,#f7f3e6 0 5px,transparent 5px 9px,#b07cff 9px 14px,transparent 14px 20px,#ff8a2a 20px 25px,transparent 25px 30px) 0 0/30px 2px repeat-x} @keyframes fl-crawl{0%{background-position:0 0}25%,40%{background-position:10px 0}65%,80%{background-position:22px 0}100%{background-position:40px 0}} @keyframes fl-oncoming{0%{background-position:0 0}30%{background-position:-15px 0}50%,70%{background-position:-20px 0}100%{background-position:-30px 0}} @keyframes fl-brake{0%,20%,45%,60%,85%,100%{filter:drop-shadow(0 0 0 rgba(255,42,63,0))}28%,37%,68%,77%{filter:drop-shadow(0 0 4px rgba(255,42,63,.85))}} /* ---- 4.27.0: Old School RuneScape's chat effects (gridlock.py FLAIR), all twelve colours and five effects ---- The game's numbers: its colours exactly, its clock (50 ticks a second) for the timing, and its pixels at 12 to an em for the moves. Every colour has the game's black shadow one pixel down and right. A message lasted 3 s, so Shake, Scroll and Slide play over 3 s and start again. Wave, Wave 2 and Shake move each letter (app.js flairName splits the name into .fl-l > .fl-m); Shake's keyframes are built there too (shakeKeyframes). */ [data-fc="yellow"],[data-fc="red"],[data-fc="green"],[data-fc="cyan"],[data-fc="purple"],[data-fc="white"], [data-fc="flashone"],[data-fc="flashtwo"],[data-fc="flashthree"],[data-fc="glowone"],[data-fc="glowtwo"],[data-fc="glowthree"]{filter:drop-shadow(1px 1px 0 #000)} /* Rare paints: the six plain ones */ [data-fc="yellow"]{--fc:#ffff00} [data-fc="red"]{--fc:#ff0000} [data-fc="green"]{--fc:#00ff00} [data-fc="cyan"]{--fc:#00ffff} [data-fc="purple"]{--fc:#ff00ff} [data-fc="white"]{--fc:#ffffff} /* Epic paints: two colours swapped every 10 ticks */ [data-fc="flashone"]{--fc:#ff0000;--fca:fl-os-flash1 .4s step-end infinite} [data-fc="flashtwo"]{--fc:#0000ff;--fca:fl-os-flash2 .4s step-end infinite} [data-fc="flashthree"]{--fc:#00b000;--fca:fl-os-flash3 .4s step-end infinite} @keyframes fl-os-flash1{0%{color:#ff0000}50%,100%{color:#ffff00}} @keyframes fl-os-flash2{0%{color:#0000ff}50%,100%{color:#00ffff}} @keyframes fl-os-flash3{0%{color:#00b000}50%,100%{color:#80ff80}} /* Legendary paints: three straight fades in 150 ticks, then back to the first colour at once */ [data-fc="glowone"]{--fc:#ff0000;--fca:fl-os-glow1 3s linear infinite} [data-fc="glowtwo"]{--fc:#ff0000;--fca:fl-os-glow2 3s linear infinite} [data-fc="glowthree"]{--fc:#ffffff;--fca:fl-os-glow3 3s linear infinite} @keyframes fl-os-glow1{0%{color:#ff0000}33.333%{color:#ffff00}66.667%{color:#00ff00}100%{color:#00ffff}} @keyframes fl-os-glow2{0%{color:#ff0000}33.333%{color:#ff00ff}66.667%{color:#0000ff}100%{color:#ff0000}} @keyframes fl-os-glow3{0%{color:#ffffff}33.333%{color:#00ff00}66.667%{color:#ffffff}100%{color:#00ffff}} /* The letter effects: room above and below for the letters' swing, taken back so the row stays the same height */ [data-fe="wave"],[data-fe="wavetwo"],[data-fe="shake"]{padding-top:calc(3px + .6em);padding-bottom:calc(3px + .6em);margin-top:calc(-3px - .6em);margin-bottom:calc(-3px - .6em)} .flair .fl-l,.flair .fl-m{display:inline-block;white-space:pre} /* A paint clipped to the name can't reach letters that move on their own, so each letter (.fl-m) carries the paint and its motion itself: a gradient runs across every letter rather than the whole name. */ .flair[data-fc] .fl-m{color:var(--fc,currentColor);background-image:var(--fg,none);background-size:var(--fs,100% 100%);-webkit-background-clip:text;background-clip:text;animation:var(--fca,none)} /* Rare effect: Wave, each letter 5 px up and down, sin(letter / 2 + tick / 5) */ [data-fe="wave"] .fl-l{animation:fl-os-y .314s cubic-bezier(.37,0,.63,1) calc(var(--i) * -.05s) infinite alternate} /* Legendary effect: Wave 2, each letter round a loop: across by sin(letter / 5 + tick / 5), up by sin(letter / 3 + tick / 5) */ [data-fe="wavetwo"] .fl-l{animation:fl-os-x .314s cubic-bezier(.37,0,.63,1) calc(var(--i) * -.02s) infinite alternate,fl-os-y .314s cubic-bezier(.37,0,.63,1) calc(var(--i) * -.0333s) infinite alternate} @keyframes fl-os-x{from{translate:-.417em 0}to{translate:.417em 0}} @keyframes fl-os-y{from{transform:translateY(-.417em)}to{transform:translateY(.417em)}} /* Epic effect: Shake, each letter jolted by sin(letter / 1.5 + tick), 7 px at first and calm by tick 56 */ [data-fe="shake"] .fl-l{animation:fl-os-shake0 3s step-end infinite} /* Epic effect: Scroll, the name crossing its own box right to left, in from one side and out the other */ [data-fe="scroll"],[data-fe="slide"]{overflow:hidden} [data-fe="scroll"]{--fea:fl-os-scroll 3s linear infinite} [data-fe="scroll"] .fl-t,[data-fe="slide"] .fl-t{display:inline-block} @keyframes fl-os-scroll{from{transform:translateX(100%)}to{transform:translateX(-100%)}} /* Rare effect: Slide, the name drops into its box over 25 ticks, waits 100, and drops out the bottom over 25 */ [data-fe="slide"]{--fea:fl-os-slide 3s linear infinite} @keyframes fl-os-slide{0%{transform:translateY(-2.083em)}16.667%,83.333%{transform:none}100%{transform:translateY(2.083em)}} /* ---- 4.28.0: Celestial, a colour and an effect, each one roll in 100,000 (owner, 2026-10-03: "AAA-title effort") ---- Sizes are in em (with a floor in px for a 13px board name), so the look holds from a board row to the prize card. */ /* Celestial paint, Andromeda: a galaxy inside the letters. Nebula clouds (magenta, cyan, violet) drift across a deep indigo at different speeds, one the other way; a Milky Way band, cream-white with a dark lane of dust through it, slides slowly along; three fields of stars pass through at their own pace, the near ones larger and brighter, so the letters twinkle; and the whole name glows magenta close in and cyan further out. */ [data-fc="andromeda"]{--fc:transparent;--fca:fl-andromeda 12s linear infinite; --fs:1.1em .9em,.75em 1.05em,1.9em 1.45em,200% 100%,150% 100%,150% 100%,150% 100%,120% 100%,100% 100%; --fg:radial-gradient(circle at 20% 30%,#fff 0 max(.7px,.045em),rgba(200,235,255,.6) max(1px,.075em),transparent max(1.6px,.12em)), radial-gradient(circle at 70% 60%,#fff 0 max(.5px,.032em),transparent max(1px,.07em)), radial-gradient(circle at 50% 50%,#fff 0 max(.8px,.055em),rgba(150,215,255,.65) max(1.3px,.1em),transparent max(2.6px,.2em)), linear-gradient(112deg,transparent 30%,rgba(255,232,200,.6) 40%,#fff8ec 45%,rgba(40,10,70,.8) 47.3%,rgba(255,222,185,.85) 49.5%,rgba(255,232,200,.45) 54%,transparent 63%), radial-gradient(40% 80% at 20% 40%,#ff52c8 0,rgba(255,82,200,.6) 42%,transparent 72%), radial-gradient(36% 90% at 55% 62%,#38e4ff 0,rgba(56,228,255,.55) 42%,transparent 72%), radial-gradient(40% 80% at 86% 32%,#b47cff 0,rgba(180,124,255,.6) 42%,transparent 74%), radial-gradient(22% 60% at 40% 22%,rgba(255,190,120,.85) 0,transparent 70%), linear-gradient(180deg,#4b2fb8,#7a35d0 50%,#2a6ad8); filter:drop-shadow(0 0 max(1.2px,.09em) rgba(255,90,210,.7)) drop-shadow(0 0 max(4px,.36em) rgba(60,200,255,.55))} @keyframes fl-andromeda{to{background-position:-2.2em .9em,1.5em -1.05em,-1.9em 0,-200% 0,-300% 0,300% 0,-600% 0,-600% 0,0 0}} /* Celestial effect, Einstein Ring (Einstein lived in Princeton, on the line): a ring of light round the name, seen nearly edge on, a hair thin above and below and widest at the ends like a disk; its far half behind the letters, its near half in front, brightest on the left (the side coming toward us), with clumps of gas streaming round it; a photon orbiting on it with two after-images, warming the letters as it crosses in front; and a star behind it all, bent into two images that flicker at the ring's ends. A name has only two pseudo-elements, so app.js flairName adds the ring's two layers (.fl-p: the far one under the name, the near one over it showing only its lower half, each with the photon's path, so the photon passes behind and in front as it goes round). The path is two nested translations, across and up and down a quarter turn apart, which traces the ellipse. */ [data-fe="einstein"]{isolation:isolate;max-width:calc(100% + 22px);padding:5px 11px;margin:-5px -11px;--fea:fl-ein-warm 3.6s linear infinite} [data-fe="einstein"]::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;border-radius:50%; background:radial-gradient(closest-side,rgba(255,196,120,.3),rgba(140,96,255,.14) 62%,transparent);animation:fl-ein-glow 3.6s ease-in-out infinite} [data-fe="einstein"]::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background:radial-gradient(circle at 3% 26%,#fff 0 max(.6px,.045em),rgba(170,205,255,.75) max(1px,.08em),transparent max(2.6px,.2em)), radial-gradient(circle at 97% 76%,#fff 0 max(.6px,.045em),rgba(170,205,255,.75) max(1px,.08em),transparent max(2.6px,.2em)); animation:fl-ein-lens 5.3s ease-in-out infinite} /* the far layer is the whole ring, under the name; the near one, over it, is the same ring faded in across the middle so only its lower half shows (a soft edge: hard ones, clip-path or two half boxes, drew a bright hairline where they met on the ring's ends) */ .flair .fl-p{position:absolute;inset:2px 3px;pointer-events:none} [data-fe="einstein"] .fl-p:first-of-type{z-index:-1} [data-fe="einstein"] .fl-p:last-of-type{z-index:1;-webkit-mask:linear-gradient(180deg,transparent 46%,#000 56%);mask:linear-gradient(180deg,transparent 46%,#000 56%)} [data-fe="einstein"] .fl-p::before{content:"";position:absolute;inset:0; background:linear-gradient(90deg,transparent 30%,rgba(255,255,255,.9) 42%,transparent 54%) 0 0/1.6em 100% repeat-x, linear-gradient(90deg,#fffaf0,#ffc46b 20%,#ff8a3d 55%,#ffad55 82%,#ffe4bd); -webkit-mask:radial-gradient(closest-side,transparent 85%,#000 90.5%,#000 95.5%,transparent 100%);mask:radial-gradient(closest-side,transparent 85%,#000 90.5%,#000 95.5%,transparent 100%); animation:fl-ein-flow 1.2s linear infinite} [data-fe="einstein"] .fl-p:first-of-type::before{opacity:.7;animation-direction:reverse} /* the photon and its after-images, each a little behind the one before; held still, it rests front left. The path sits 3.5% inside the ring's box, on the ring's middle. */ [data-fe="einstein"] .fl-p b{position:absolute;display:block} [data-fe="einstein"] .fl-p>b{inset:3.5%;transform:translateX(-36%);animation:fl-ein-x 1.8s cubic-bezier(.37,0,.63,1) infinite alternate} [data-fe="einstein"] .fl-p>b>b{inset:0;transform:translateY(35%);animation:fl-ein-y 1.8s cubic-bezier(.37,0,.63,1) -.9s infinite alternate} [data-fe="einstein"] .fl-p>b:nth-child(2){animation-delay:-3.52s} [data-fe="einstein"] .fl-p>b:nth-child(2)>b{animation-delay:-4.42s} [data-fe="einstein"] .fl-p>b:nth-child(3){animation-delay:-3.44s} [data-fe="einstein"] .fl-p>b:nth-child(3)>b{animation-delay:-4.34s} [data-fe="einstein"] .fl-p>b>b::before{content:"";position:absolute;left:50%;top:50%;width:max(3px,.2em);height:max(3px,.2em);border-radius:50%;transform:translate(-50%,-50%); background:#fff;box-shadow:0 0 max(1.5px,.12em) max(.5px,.04em) #fff7e0,0 0 max(5px,.4em) max(1px,.1em) rgba(255,176,90,.9)} [data-fe="einstein"] .fl-p>b:nth-child(2)>b::before{opacity:.5;transform:translate(-50%,-50%) scale(.75)} [data-fe="einstein"] .fl-p>b:nth-child(3)>b::before{opacity:.25;transform:translate(-50%,-50%) scale(.55)} @keyframes fl-ein-x{from{transform:translateX(-50%)}to{transform:translateX(50%)}} @keyframes fl-ein-y{from{transform:translateY(-50%)}to{transform:translateY(50%)}} @keyframes fl-ein-flow{to{background-position:1.6em 0,0 0}} @keyframes fl-ein-glow{0%,100%{opacity:.65}50%{opacity:1}} @keyframes fl-ein-lens{0%,100%{opacity:.2}12%{opacity:1}22%{opacity:.4}31%{opacity:.95}50%{opacity:.25}} /* the letters catch the photon's light as it crosses in front of them (a quarter of the way round) */ @keyframes fl-ein-warm{0%,12%,38%,100%{filter:drop-shadow(0 0 max(1px,.08em) rgba(255,190,110,.35))}25%{filter:drop-shadow(0 max(1px,.06em) max(2px,.16em) rgba(255,214,150,.95))}} /* Celestial effect, Ultra Instinct (4.32.0, owner 2026-10-04: Dragon Ball Super's, where Goku's body dodges on its own): a silver aura round the name, white at its heart and blue-violet at its edge, with wisps licking up through it; ki sparks rising, four behind the letters and four in front; the letters lit silver, breathing; and twice in its six seconds the name slips aside on its own and eases back, leaving a silver afterimage where it stood and a ripple of ki going out from there. app.js flairName adds the afterimage (.fl-ui-ghost: the name again, laid out like it) and two layers: the far one, under the name, with the flames and four sparks, the near one with four more. Every loop divides 6 s, so a shared card's GIF closes its loop. */ [data-fe="ultrainstinct"]{isolation:isolate;max-width:calc(100% + 20px);padding:max(6px,.45em) 10px 4px;margin:min(-6px,-.45em) -10px -4px; --fea:fl-ui-dodge 6s linear infinite,fl-ui-shine 1.5s ease-in-out infinite alternate} [data-fe="ultrainstinct"] .fl-t{position:relative} /* the aura: a glow behind the name, breathing, and in it six tongues of silver flame licking up, each rising, stretching and fading at its own pace */ [data-fe="ultrainstinct"]::before{content:"";position:absolute;inset:0 2px;z-index:-2;pointer-events:none; background:radial-gradient(closest-side,rgba(215,228,255,.5),rgba(125,125,255,.3) 60%,rgba(90,80,220,.1) 84%,transparent); animation:fl-ui-breathe 1.5s ease-in-out infinite alternate} [data-fe="ultrainstinct"] .fl-p s{position:absolute;bottom:6%;left:var(--x);display:block;width:max(12px,.9em,20%);height:max(17px,1.3em); transform:translateX(-50%);border-radius:50%;opacity:.5;background:radial-gradient(closest-side,rgba(242,247,255,.85),rgba(160,175,255,.45) 50%,transparent); animation:fl-ui-lick var(--t) ease-in-out var(--d) infinite} .fl-ui-far s:nth-of-type(1){--x:8%;--t:1.5s;--d:-.2s} .fl-ui-far s:nth-of-type(2){--x:25%;--t:2s;--d:-1.1s} .fl-ui-far s:nth-of-type(3){--x:42%;--t:1.5s;--d:-.9s} .fl-ui-far s:nth-of-type(4){--x:58%;--t:3s;--d:-.5s} .fl-ui-far s:nth-of-type(5){--x:75%;--t:2s;--d:-.3s} .fl-ui-far s:nth-of-type(6){--x:92%;--t:1.5s;--d:-.6s} /* the ripple from where the name dodged */ [data-fe="ultrainstinct"]::after{content:"";position:absolute;inset:12% 6px 8%;z-index:-1;pointer-events:none;border-radius:50%;opacity:0; border:max(1px,.06em) solid rgba(228,236,255,.6);box-shadow:0 0 max(3px,.22em) rgba(140,170,255,.6); animation:fl-ui-ripple 6s ease-out infinite} /* the afterimage, on the name's own place (the box's padding, its own ellipsis), seen only as the name leaves it */ [data-fe="ultrainstinct"] .fl-ui-ghost{inset:0;z-index:-1;padding:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-style:normal;opacity:0; color:rgba(222,232,255,.75);text-shadow:0 0 max(2px,.15em) rgba(140,170,255,.95);animation:fl-ui-ghost 6s linear infinite} /* the sparks: each rises from low in the aura and fades out above the name; held still, they rest low */ [data-fe="ultrainstinct"] :is(.fl-ui-far,.fl-ui-near){inset:0} [data-fe="ultrainstinct"] .fl-ui-far{z-index:-1} [data-fe="ultrainstinct"] .fl-ui-near{z-index:1} [data-fe="ultrainstinct"] .fl-p b{position:absolute;bottom:18%;left:var(--x);display:block;width:max(2px,.13em);height:max(2px,.13em);border-radius:50%;opacity:.7; background:#fff;box-shadow:0 0 max(2px,.14em) max(.5px,.04em) #e4ecff,0 0 max(4px,.32em) rgba(130,160,255,.9); animation:fl-ui-rise var(--t) ease-out var(--d) infinite} [data-fe="ultrainstinct"] .fl-ui-near b{opacity:.5;width:max(1.5px,.1em);height:max(1.5px,.1em)} .fl-ui-far b:nth-of-type(1){--x:12%;--t:3s;--d:-.4s;--dx:.14em} .fl-ui-far b:nth-of-type(2){--x:46%;--t:2s;--d:-1.3s;--dx:-.1em} .fl-ui-far b:nth-of-type(3){--x:70%;--t:1.5s;--d:-.2s;--dx:.08em} .fl-ui-far b:nth-of-type(4){--x:90%;--t:3s;--d:-2.1s;--dx:-.16em} .fl-ui-near b:nth-of-type(1){--x:24%;--t:1.5s;--d:-.9s;--dx:-.12em} .fl-ui-near b:nth-of-type(2){--x:58%;--t:3s;--d:-1.1s;--dx:.12em} .fl-ui-near b:nth-of-type(3){--x:82%;--t:2s;--d:-.3s;--dx:.1em} .fl-ui-near b:nth-of-type(4){--x:4%;--t:2s;--d:-1.7s;--dx:.06em} @keyframes fl-ui-breathe{from{opacity:.7}to{opacity:1}} @keyframes fl-ui-lick{0%{opacity:0;transform:translate(-50%,.15em) scale(.7,.5)}35%{opacity:1}100%{opacity:0;transform:translate(-50%,-.8em) scale(.7,1.5)}} @keyframes fl-ui-shine{from{filter:drop-shadow(0 0 max(1px,.07em) rgba(235,242,255,.75)) drop-shadow(0 0 max(3px,.24em) rgba(120,150,255,.45))} to{filter:drop-shadow(0 0 max(1px,.09em) rgba(255,255,255,.95)) drop-shadow(0 0 max(4px,.34em) rgba(150,175,255,.75))}} @keyframes fl-ui-dodge{0%,30.5%{left:0}31%,33%{left:-.34em;animation-timing-function:cubic-bezier(.3,0,.2,1)}39%,80.5%{left:0} 81%,83%{left:.3em;animation-timing-function:cubic-bezier(.3,0,.2,1)}89%,100%{left:0}} @keyframes fl-ui-ghost{0%,30.5%{opacity:0}31%{opacity:.85}41%,80.5%{opacity:0}81%{opacity:.85}91%,100%{opacity:0}} @keyframes fl-ui-ripple{0%,30.5%{opacity:0;transform:scale(.6)}31%{opacity:.8;transform:scale(.65)}37%{opacity:0;transform:scale(1.1)} 38%,80.5%{opacity:0;transform:scale(.6)}81%{opacity:.8;transform:scale(.65)}87%{opacity:0;transform:scale(1.1)}88%,100%{opacity:0;transform:scale(.6)}} @keyframes fl-ui-rise{0%{opacity:0;transform:translate(0,0) scale(.6)}15%{opacity:1}70%{opacity:.8}100%{opacity:0;transform:translate(var(--dx),-1.25em) scale(1)}} /* Mythical effect, Thunderclap and Flash (4.56.0; owner, 2026-10-13: Zenitsu Agatsuma's lightning, Demon Slayer). The name waits, glowing gold; then, with no build-up, Zenitsu goes through it: in one frame a whole jagged bolt slashes across the name, a white flash swallows it, speed lines streak past and the name jolts and flares white; the bolt blinks out, strikes again in a new shape, and fades, throwing off sparks, the haori's white and gold scales. Every three seconds, each strike a different bolt. app.js flairName adds three layers: the bolt (body and white core, b, and three forks, s), the speed lines and the scales. Every loop divides 6 s, so a shared card's GIF closes its loop; held still it shows the name in its gold glow. The box has room above and below for the scales (taken back by the margin, so no row grows). */ [data-fe="thunderclap"]{isolation:isolate;max-width:calc(100% + 20px);padding:max(9px,.65em) 10px max(8px,.55em);margin:min(-9px,-.65em) -10px min(-8px,-.55em); --fea:fl-zt-hit 3s linear infinite} [data-fe="thunderclap"] .fl-t{position:relative;filter:drop-shadow(0 0 max(1px,.07em) rgba(255,226,100,.7)) drop-shadow(0 0 max(3px,.2em) rgba(255,170,30,.35))} /* the gold glow behind the name, thrown wide by each strike */ [data-fe="thunderclap"]::before{content:"";position:absolute;inset:0 2px;z-index:-2;pointer-events:none;opacity:.45; background:radial-gradient(closest-side,rgba(255,226,120,.45),rgba(255,170,30,.2) 60%,transparent);animation:fl-zt-aura 3s ease-out infinite} /* the flash: white over the whole name for an instant, then a second, smaller one with the restrike */ [data-fe="thunderclap"]::after{content:"";position:absolute;inset:-2px 0;z-index:3;border-radius:40%;pointer-events:none;opacity:0; background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,246,190,.6) 45%,rgba(255,214,60,.15) 75%,transparent);animation:fl-zt-flash 3s linear infinite} [data-fe="thunderclap"] :is(.fl-zt-bolt,.fl-zt-lines,.fl-zt-scales){inset:0;z-index:1} [data-fe="thunderclap"] .fl-zt-scales{z-index:2} /* the bolt: there all at once, gone for a blink, back in its restrike shape, then fading. Its strokes jump to the second bolt for the second strike (fl-zt-path, on a 6 s clock); its glow is the layer's filter, so the clipped strokes glow as one. The forks branch off the three points both bolts pass through. */ [data-fe="thunderclap"] .fl-zt-bolt{opacity:0;animation:fl-zt-strike 3s linear infinite; filter:drop-shadow(0 0 max(1px,.07em) #fff) drop-shadow(0 0 max(2px,.12em) #ffe14d) drop-shadow(0 0 max(3px,.22em) rgba(255,170,20,.75))} [data-fe="thunderclap"] .fl-zt-bolt b{position:absolute;inset:0;display:block;background:linear-gradient(#fff6b0,#ffc61a 50%,#ff8a00);clip-path:polygon(0 23%,9% 35%,13% 29%,22% 39%,31% 45%,35% 40%,44% 56%,52% 51%,57% 54%,63% 42%,67% 46%,74% 31%,80% 33%,88% 45%,93% 40%,100% 51%,100% 65%,93% 54%,88% 59%,80% 47%,74% 45%,67% 60%,63% 56%,57% 68%,52% 65%,44% 70%,35% 54%,31% 59%,22% 53%,13% 43%,9% 49%,0 37%); animation:fl-zt-path 6s steps(1,end) infinite} [data-fe="thunderclap"] .fl-zt-bolt b:nth-of-type(2){background:#fff;clip-path:polygon(0 27.5%,9% 39.5%,13% 33.5%,22% 43.5%,31% 49.5%,35% 44.5%,44% 60.5%,52% 55.5%,57% 58.5%,63% 46.5%,67% 50.5%,74% 35.5%,80% 37.5%,88% 49.5%,93% 44.5%,100% 55.5%,100% 60.5%,93% 49.5%,88% 54.5%,80% 42.5%,74% 40.5%,67% 55.5%,63% 51.5%,57% 63.5%,52% 60.5%,44% 65.5%,35% 49.5%,31% 54.5%,22% 48.5%,13% 38.5%,9% 44.5%,0 32.5%);animation-name:fl-zt-pathcore} [data-fe="thunderclap"] .fl-zt-bolt s{position:absolute;display:block;width:max(10px,.75em);height:max(9px,.65em);background:linear-gradient(#fff8c0,#ffd23f); clip-path:polygon(0 100%,30% 55%,22% 50%,60% 15%,52% 10%,100% 0,64% 26%,72% 30%,38% 64%,46% 68%)} .fl-zt-bolt s:nth-of-type(1){left:22%;top:calc(46% - max(9px,.65em))} .fl-zt-bolt s:nth-of-type(2){left:52%;top:58%;transform:scaleY(-1)} .fl-zt-bolt s:nth-of-type(3){left:calc(80% - max(10px,.75em));top:calc(40% - max(9px,.65em));transform:scaleX(-1)} /* speed lines: three white streaks shooting through with the bolt, the way it went */ [data-fe="thunderclap"] .fl-zt-lines b{position:absolute;left:0;top:var(--y);display:block;width:70%;height:max(1px,.06em);opacity:0;transform-origin:0 50%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.95) 70%,transparent);animation:fl-zt-line 3s linear var(--d) infinite} .fl-zt-lines b:nth-of-type(1){--y:20%;--d:0s} .fl-zt-lines b:nth-of-type(2){--y:74%;--d:.03s} .fl-zt-lines b:nth-of-type(3){--y:86%;--d:.06s} /* the scales: six sparks, white and gold triangles like the haori's, thrown off the bolt along its length */ [data-fe="thunderclap"] .fl-zt-scales s{position:absolute;left:var(--x);top:var(--y);display:block;width:max(4px,.3em);height:max(4px,.28em);opacity:0; background:#fff8d8;clip-path:polygon(50% 0,100% 100%,0 100%);animation:fl-zt-spark 3s ease-out infinite} .fl-zt-scales s:nth-of-type(even){background:#ffd23f} .fl-zt-scales s:nth-of-type(1){--x:12%;--y:40%;--dx:-.3em;--dy:-.8em;--r:200deg} .fl-zt-scales s:nth-of-type(2){--x:28%;--y:58%;--dx:.2em;--dy:.8em;--r:-160deg} .fl-zt-scales s:nth-of-type(3){--x:45%;--y:46%;--dx:.4em;--dy:-.9em;--r:140deg} .fl-zt-scales s:nth-of-type(4){--x:62%;--y:54%;--dx:.5em;--dy:.7em;--r:-240deg} .fl-zt-scales s:nth-of-type(5){--x:78%;--y:40%;--dx:.7em;--dy:-.7em;--r:280deg} .fl-zt-scales s:nth-of-type(6){--x:92%;--y:52%;--dx:1em;--dy:.3em;--r:-200deg} @keyframes fl-zt-hit{0%,59.9%{left:0;filter:brightness(1) drop-shadow(0 0 max(1px,.07em) rgba(255,226,100,.7)) drop-shadow(0 0 max(3px,.2em) rgba(255,170,30,.35))}60%{left:.16em;filter:brightness(2.2) drop-shadow(0 0 max(2px,.12em) #fff) drop-shadow(0 0 max(6px,.4em) rgba(255,214,60,.95))}61%{left:-.07em} 62.5%{left:.03em;filter:brightness(1.4) drop-shadow(0 0 max(1px,.1em) #fff3a0) drop-shadow(0 0 max(4px,.3em) rgba(255,190,40,.8))}63%{filter:brightness(1.9) drop-shadow(0 0 max(2px,.12em) #fff) drop-shadow(0 0 max(5px,.36em) rgba(255,214,60,.9))}64%{left:0;filter:brightness(1.4) drop-shadow(0 0 max(1px,.1em) #fff3a0) drop-shadow(0 0 max(4px,.3em) rgba(255,190,40,.8))} 80%,100%{left:0;filter:brightness(1) drop-shadow(0 0 max(1px,.07em) rgba(255,226,100,.7)) drop-shadow(0 0 max(3px,.2em) rgba(255,170,30,.35))}} @keyframes fl-zt-aura{0%,59.9%{opacity:.45;transform:none}60%{opacity:1;transform:scale(1.05)}80%,100%{opacity:.45;transform:none}} @keyframes fl-zt-flash{0%,59.9%{opacity:0}60%{opacity:.95}61.4%{opacity:.2}62.4%{opacity:.1}62.5%{opacity:.7}66%,100%{opacity:0}} @keyframes fl-zt-strike{0%,59.9%{opacity:0}60%,61.4%{opacity:1}61.5%,62.4%{opacity:0}62.5%,64%{opacity:1}65%{opacity:.35}66%{opacity:.85}72%,100%{opacity:0}} @keyframes fl-zt-path{0%{clip-path:polygon(0 23%,9% 35%,13% 29%,22% 39%,31% 45%,35% 40%,44% 56%,52% 51%,57% 54%,63% 42%,67% 46%,74% 31%,80% 33%,88% 45%,93% 40%,100% 51%,100% 65%,93% 54%,88% 59%,80% 47%,74% 45%,67% 60%,63% 56%,57% 68%,52% 65%,44% 70%,35% 54%,31% 59%,22% 53%,13% 43%,9% 49%,0 37%)}31.5%{clip-path:polygon(0 23%,9% 42%,13% 36%,22% 39%,31% 52%,35% 35%,44% 51%,52% 51%,57% 61%,63% 37%,67% 39%,74% 38%,80% 33%,88% 50%,93% 35%,100% 51%,100% 65%,93% 49%,88% 64%,80% 47%,74% 52%,67% 53%,63% 51%,57% 75%,52% 65%,44% 65%,35% 49%,31% 66%,22% 53%,13% 50%,9% 56%,0 37%)}40%{clip-path:polygon(0 23%,9% 35%,13% 29%,22% 39%,31% 45%,35% 40%,44% 56%,52% 51%,57% 54%,63% 42%,67% 46%,74% 31%,80% 33%,88% 45%,93% 40%,100% 51%,100% 65%,93% 54%,88% 59%,80% 47%,74% 45%,67% 60%,63% 56%,57% 68%,52% 65%,44% 70%,35% 54%,31% 59%,22% 53%,13% 43%,9% 49%,0 37%)}50%{clip-path:polygon(0 59%,8% 49%,12% 53%,22% 39%,26% 31%,33% 35%,41% 23%,46% 43%,52% 51%,60% 47%,66% 57%,71% 41%,80% 33%,84% 27%,92% 31%,100% 19%,100% 33%,92% 45%,84% 41%,80% 47%,71% 55%,66% 71%,60% 61%,52% 65%,46% 57%,41% 37%,33% 49%,26% 45%,22% 53%,12% 67%,8% 63%,0 73%)}81.5%{clip-path:polygon(0 59%,8% 42%,12% 46%,22% 39%,26% 38%,33% 42%,41% 18%,46% 36%,52% 51%,60% 40%,66% 50%,71% 34%,80% 33%,84% 22%,92% 26%,100% 19%,100% 33%,92% 40%,84% 36%,80% 47%,71% 48%,66% 64%,60% 54%,52% 65%,46% 50%,41% 32%,33% 56%,26% 52%,22% 53%,12% 60%,8% 56%,0 73%)}90%{clip-path:polygon(0 59%,8% 49%,12% 53%,22% 39%,26% 31%,33% 35%,41% 23%,46% 43%,52% 51%,60% 47%,66% 57%,71% 41%,80% 33%,84% 27%,92% 31%,100% 19%,100% 33%,92% 45%,84% 41%,80% 47%,71% 55%,66% 71%,60% 61%,52% 65%,46% 57%,41% 37%,33% 49%,26% 45%,22% 53%,12% 67%,8% 63%,0 73%)}} @keyframes fl-zt-pathcore{0%{clip-path:polygon(0 27.5%,9% 39.5%,13% 33.5%,22% 43.5%,31% 49.5%,35% 44.5%,44% 60.5%,52% 55.5%,57% 58.5%,63% 46.5%,67% 50.5%,74% 35.5%,80% 37.5%,88% 49.5%,93% 44.5%,100% 55.5%,100% 60.5%,93% 49.5%,88% 54.5%,80% 42.5%,74% 40.5%,67% 55.5%,63% 51.5%,57% 63.5%,52% 60.5%,44% 65.5%,35% 49.5%,31% 54.5%,22% 48.5%,13% 38.5%,9% 44.5%,0 32.5%)}31.5%{clip-path:polygon(0 27.5%,9% 46.5%,13% 40.5%,22% 43.5%,31% 56.5%,35% 39.5%,44% 55.5%,52% 55.5%,57% 65.5%,63% 41.5%,67% 43.5%,74% 42.5%,80% 37.5%,88% 54.5%,93% 39.5%,100% 55.5%,100% 60.5%,93% 44.5%,88% 59.5%,80% 42.5%,74% 47.5%,67% 48.5%,63% 46.5%,57% 70.5%,52% 60.5%,44% 60.5%,35% 44.5%,31% 61.5%,22% 48.5%,13% 45.5%,9% 51.5%,0 32.5%)}40%{clip-path:polygon(0 27.5%,9% 39.5%,13% 33.5%,22% 43.5%,31% 49.5%,35% 44.5%,44% 60.5%,52% 55.5%,57% 58.5%,63% 46.5%,67% 50.5%,74% 35.5%,80% 37.5%,88% 49.5%,93% 44.5%,100% 55.5%,100% 60.5%,93% 49.5%,88% 54.5%,80% 42.5%,74% 40.5%,67% 55.5%,63% 51.5%,57% 63.5%,52% 60.5%,44% 65.5%,35% 49.5%,31% 54.5%,22% 48.5%,13% 38.5%,9% 44.5%,0 32.5%)}50%{clip-path:polygon(0 63.5%,8% 53.5%,12% 57.5%,22% 43.5%,26% 35.5%,33% 39.5%,41% 27.5%,46% 47.5%,52% 55.5%,60% 51.5%,66% 61.5%,71% 45.5%,80% 37.5%,84% 31.5%,92% 35.5%,100% 23.5%,100% 28.5%,92% 40.5%,84% 36.5%,80% 42.5%,71% 50.5%,66% 66.5%,60% 56.5%,52% 60.5%,46% 52.5%,41% 32.5%,33% 44.5%,26% 40.5%,22% 48.5%,12% 62.5%,8% 58.5%,0 68.5%)}81.5%{clip-path:polygon(0 63.5%,8% 46.5%,12% 50.5%,22% 43.5%,26% 42.5%,33% 46.5%,41% 22.5%,46% 40.5%,52% 55.5%,60% 44.5%,66% 54.5%,71% 38.5%,80% 37.5%,84% 26.5%,92% 30.5%,100% 23.5%,100% 28.5%,92% 35.5%,84% 31.5%,80% 42.5%,71% 43.5%,66% 59.5%,60% 49.5%,52% 60.5%,46% 45.5%,41% 27.5%,33% 51.5%,26% 47.5%,22% 48.5%,12% 55.5%,8% 51.5%,0 68.5%)}90%{clip-path:polygon(0 63.5%,8% 53.5%,12% 57.5%,22% 43.5%,26% 35.5%,33% 39.5%,41% 27.5%,46% 47.5%,52% 55.5%,60% 51.5%,66% 61.5%,71% 45.5%,80% 37.5%,84% 31.5%,92% 35.5%,100% 23.5%,100% 28.5%,92% 40.5%,84% 36.5%,80% 42.5%,71% 50.5%,66% 66.5%,60% 56.5%,52% 60.5%,46% 52.5%,41% 32.5%,33% 44.5%,26% 40.5%,22% 48.5%,12% 62.5%,8% 58.5%,0 68.5%)}} @keyframes fl-zt-line{0%,59.9%{opacity:0;transform:translateX(-40%) scaleX(.3)}60%{opacity:1;transform:translateX(0) scaleX(1)}63%{opacity:.6;transform:translateX(45%) scaleX(.8)} 66%,100%{opacity:0;transform:translateX(60%) scaleX(.5)}} @keyframes fl-zt-spark{0%,59.9%{opacity:0;transform:translate(0,0) rotate(0) scale(.5)}60%{opacity:1}78%,100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(1)}} /* ---- 4.46.0: ten new every week (gridlock.py WEEKLY_FLAIR), each week's joining the machine on its Monday ---- The same rules as the rest: Common and Uncommon paints are plain or two-tone and their effects a still mark, Rare a metal or gem and a still light or frame, Epic and up move. */ /* 2026-W41, autumn */ [data-fc="acorn"]{--fc:#c8955a} [data-fe="leaf"]{padding-left:17px} [data-fe="leaf"]::before{content:"";position:absolute;left:6px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:0 80% 0 80%;transform:rotate(-20deg);pointer-events:none; background:linear-gradient(135deg,#ffb627,#e8432e)} [data-fc="cider"]{--fc:transparent;--fg:linear-gradient(90deg,#d9772b,#ffd38a)} [data-fc="foliage"]{--fc:transparent;--fg:linear-gradient(90deg,#e8432e,#ff9a2a,#ffd23f)} [data-fe="detour"]{padding-right:21px} [data-fe="detour"]::after{content:"\2192";position:absolute;right:5px;top:50%;width:13px;height:9px;margin-top:-4.5px;border-radius:1.5px;pointer-events:none; font-size:9px;line-height:9px;font-weight:700;text-align:center;color:#0b1020;background:#ff8a2a;box-shadow:0 0 0 1px #0b1020} [data-fc="amethyst"]{--fc:transparent;--fg:linear-gradient(160deg,#f0dcff 0%,#b07cff 35%,#6a2fc0 52%,#c9a0ff 70%,#f5e8ff 100%);filter:drop-shadow(0 0 2px rgba(176,124,255,.5))} [data-fe="halo"]::before{content:"";position:absolute;left:50%;top:0;width:16px;height:3px;margin-left:-8px;border:1.5px solid #fff1a0;border-radius:50%;box-sizing:border-box;pointer-events:none; box-shadow:0 0 4px rgba(255,225,77,.8)} [data-fe="halo"] .fl-t{filter:drop-shadow(0 0 2px rgba(255,241,160,.55))} /* Jack-o'-Lantern: candlelight flickering up through the letters, glowing orange */ [data-fc="lantern"]{--fc:transparent;--fs:100% 200%;--fg:linear-gradient(180deg,#ff6a00,#ffb627,#fff1a0,#ffb627,#ff6a00);--fca:fl-lantern 2.4s linear infinite; filter:drop-shadow(0 0 3px rgba(255,140,0,.75))} @keyframes fl-lantern{0%{background-position:0 0}18%{background-position:0 40%}26%{background-position:0 30%}55%{background-position:0 120%}62%{background-position:0 105%}100%{background-position:0 200%}} /* Night Bats: two bats flap across, one over the name, one under it the other way */ [data-fe="bats"]::before,[data-fe="bats"]::after{content:"";position:absolute;width:11px;height:6px;pointer-events:none;background:#8a6cc0;filter:drop-shadow(0 0 1px #e0d0ff) drop-shadow(0 0 3px rgba(176,124,255,.8)); clip-path:polygon(0 20%,15% 0,30% 35%,42% 25%,50% 40%,58% 25%,70% 35%,85% 0,100% 20%,85% 70%,70% 55%,58% 100%,50% 75%,42% 100%,30% 55%,15% 70%); animation:fl-batflap .22s ease-in-out infinite alternate,fl-batfly 4.2s linear infinite} [data-fe="bats"]::before{top:0} [data-fe="bats"]::after{bottom:0;animation-delay:0s,-2.1s;animation-direction:alternate,reverse} @keyframes fl-batflap{from{scale:1 1}to{scale:1 .35}} @keyframes fl-batfly{0%{left:0;opacity:0;translate:0 1px}8%{opacity:1}30%{translate:0 -1px}55%{translate:0 2px}80%{translate:0 0}92%{opacity:1}100%{left:calc(100% - 11px);opacity:0;translate:0 1px}} /* Clinton Road (NJ's most haunted road): a ghost drifts across the name, a mist rolls under it, and the name goes pale and faint as the ghost passes through */ [data-fe="clintonroad"]{--fea:fl-haunt 6s ease-in-out infinite} [data-fe="clintonroad"]::before{content:"";position:absolute;top:1px;width:9px;height:11px;border-radius:50% 50% 15% 15%/60% 60% 20% 20%;pointer-events:none;z-index:1; background:radial-gradient(circle at 33% 40%,#0b1020 0 1px,transparent 1.4px),radial-gradient(circle at 67% 40%,#0b1020 0 1px,transparent 1.4px),rgba(238,250,246,.92); clip-path:polygon(0 0,100% 0,100% 100%,83% 85%,67% 100%,50% 85%,33% 100%,17% 85%,0 100%);filter:drop-shadow(0 0 3px rgba(190,255,230,.9));animation:fl-ghost 6s ease-in-out infinite} [data-fe="clintonroad"]::after{content:"";position:absolute;left:3px;right:3px;bottom:0;height:6px;border-radius:50%;pointer-events:none;filter:blur(1.5px); background:linear-gradient(90deg,rgba(200,235,225,0),rgba(200,235,225,.45),rgba(200,235,225,.15),rgba(200,235,225,.5),rgba(200,235,225,0)) 0 0/200% 100%;animation:fl-mist 7s linear infinite} @keyframes fl-ghost{0%{left:0;opacity:0;transform:translateY(1px)}12%{opacity:.95}30%{transform:translateY(-2px)}50%{transform:translateY(1.5px)}70%{transform:translateY(-1.5px)} 86%{opacity:.95}100%{left:calc(100% - 9px);opacity:0;transform:translateY(1px)}} @keyframes fl-haunt{0%,25%,75%,100%{opacity:1;filter:drop-shadow(0 0 2px rgba(170,255,220,.45))}45%,55%{opacity:.45;filter:drop-shadow(0 0 5px rgba(190,255,230,.95))}} @keyframes fl-mist{to{background-position:-200% 0}} /* 2026-W42, the road and the shore */ [data-fc="cherryhill"]{--fc:#e8336b} [data-fe="coin"]{padding-left:17px} [data-fe="coin"]::before{content:"";position:absolute;left:5px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;pointer-events:none; background:radial-gradient(circle,#ffe08a 0 2px,#c8901a 2.4px 2.9px,#ffcf4a 3.3px);box-shadow:0 0 0 1px #8a5a10} [data-fc="jerseyfresh"]{--fc:transparent;--fg:linear-gradient(90deg,#ff4d3d,#6cc24a)} [data-fe="bikelane"]::after{content:"";position:absolute;left:7px;right:7px;bottom:0;height:4px;pointer-events:none; background:linear-gradient(#f7f3e6,#f7f3e6) top/100% 1px no-repeat,linear-gradient(#f7f3e6,#f7f3e6) bottom/100% 1px no-repeat,#2fae6a} [data-fe="exitsign"]{padding-right:21px} [data-fe="exitsign"]::after{content:"\2197\FE0E";position:absolute;right:5px;top:50%;width:12px;height:11px;margin-top:-5.5px;border-radius:2px;pointer-events:none;box-sizing:border-box; font-size:9px;line-height:9px;font-weight:700;text-align:center;color:#fff;background:#0f7a43;border:1px solid #f7f3e6} [data-fc="topaz"]{--fc:transparent;--fg:linear-gradient(160deg,#fff0c8 0%,#ffb627 35%,#b8650a 52%,#ffcf6a 70%,#fff4d8 100%);filter:drop-shadow(0 0 2px rgba(255,182,39,.5))} [data-fe="blueprint"]::before{content:"";position:absolute;inset:0 2px;border-radius:3px;pointer-events:none;mix-blend-mode:screen;box-sizing:border-box;border:1px solid rgba(160,205,255,.7); background:linear-gradient(rgba(120,180,255,.3) 1px,transparent 1px) 0 0/5px 5px,linear-gradient(90deg,rgba(120,180,255,.3) 1px,transparent 1px) 0 0/5px 5px,rgba(40,90,200,.35)} /* Sea Glass: frosted greens and blues, tumbling slowly */ [data-fc="seaglass"]{--fc:transparent;--fs:200% 100%;--fg:linear-gradient(90deg,#9af5d0,#7fd6c8,#b8e8ff,#c9f0e0,#8fe0b0,#9af5d0);--fca:fl-slide 6s linear infinite; filter:drop-shadow(0 0 2px rgba(154,245,208,.5))} /* Turn Signal: an amber arrow after the name, blinking, and the name lit amber with it */ [data-fe="blinker"]{padding-right:18px;--fea:fl-turnlit .8s steps(1,end) infinite} [data-fe="blinker"]::after{content:"";position:absolute;right:5px;top:50%;width:9px;height:9px;margin-top:-4.5px;pointer-events:none;background:#ffb627; clip-path:polygon(0 30%,50% 30%,50% 0,100% 50%,50% 100%,50% 70%,0 70%);filter:drop-shadow(0 0 3px #ffb627);animation:fl-turn .8s steps(1,end) infinite} @keyframes fl-turn{50%{opacity:.12;filter:none}} @keyframes fl-turnlit{0%{filter:drop-shadow(2px 0 3px rgba(255,170,40,.8))}50%{filter:drop-shadow(0 0 0 rgba(255,170,40,0))}} /* Thunder Road: storm-blue letters, and now and then lightning runs through them */ [data-fc="thunderroad"]{--fc:transparent;--fs:200% 100%;--fca:fl-thunder 4.5s linear infinite;filter:drop-shadow(0 0 3px rgba(140,170,255,.55)); --fg:linear-gradient(90deg,#7686c0 0%,#a8b8e8 25%,#7686c0 50%,#7686c0 69%,#dfe8ff 73%,#fff 75%,#dfe8ff 77%,#7686c0 81%,#7686c0 100%)} @keyframes fl-thunder{0%{background-position:0 0}72%{background-position:-50% 0}78%{background-position:-150% 0}100%{background-position:-200% 0}} /* 2026-W43, the bay */ [data-fc="palisades"]{--fc:#7f9cc8} [data-fe="note"]{padding-left:15px} [data-fe="note"]::before{content:"\266A\FE0E";position:absolute;left:5px;top:50%;margin-top:-.6em;font-size:12px;line-height:1.2;font-weight:700;color:#ff7ab8;pointer-events:none} [data-fc="blueclaw"]{--fc:transparent;--fg:linear-gradient(90deg,#3b7bff,#ff6a3d)} [data-fc="rose"]{--fc:transparent;--fg:linear-gradient(90deg,#ffc2cf,#ff6f91)} [data-fe="squiggle"] .fl-t{text-decoration:underline wavy #4fd8ff;text-decoration-thickness:1px;text-underline-offset:2px;text-decoration-skip-ink:none} [data-fc="turquoise"]{--fc:transparent;--fg:linear-gradient(160deg,#d8fff8 0%,#2fd1c8 35%,#0f8a8a 52%,#5fe8d8 70%,#e0fffa 100%);filter:drop-shadow(0 0 2px rgba(47,209,200,.5))} /* a dark edge first, so a pale name still reads inside the white */ [data-fe="sticker"] .fl-t{filter:drop-shadow(.6px 0 0 #0b1020) drop-shadow(-.6px 0 0 #0b1020) drop-shadow(0 .6px 0 #0b1020) drop-shadow(0 -.6px 0 #0b1020) drop-shadow(1.2px 0 0 #fff) drop-shadow(-1.2px 0 0 #fff) drop-shadow(0 1.2px 0 #fff) drop-shadow(0 -1.2px 0 #fff) drop-shadow(1px 2px 1px rgba(0,0,0,.6))} /* Barber Pole: red, white and blue stripes turning through the letters */ [data-fc="barberpole"]{--fc:transparent;--fs:24px 24px;--fca:fl-pole 1.2s linear infinite; --fg:linear-gradient(135deg,#ff4d5e 0 12.5%,#f7f3e6 12.5% 25%,#4f7bff 25% 37.5%,#f7f3e6 37.5% 50%,#ff4d5e 50% 62.5%,#f7f3e6 62.5% 75%,#4f7bff 75% 87.5%,#f7f3e6 87.5%)} @keyframes fl-pole{to{background-position:24px 0}} /* Typewriter: the name held, backspaced, then typed back a key at a time; the cursor blinks after it. The loop starts on the whole name, so a still frame (a tile held off screen, reduced motion) shows it */ [data-fe="typewriter"]{--fea:fl-type 6s linear infinite} [data-fe="typewriter"] .fl-t{display:inline-block} [data-fe="typewriter"]::after{content:"";position:absolute;right:5px;top:4px;bottom:4px;width:1.5px;pointer-events:none;background:#ffb627;animation:fl-caret 1s steps(1,end) infinite} @keyframes fl-type{0%,68%{clip-path:inset(-3px -3px -3px -3px);animation-timing-function:steps(8,end)}76%,80%{clip-path:inset(-3px 100% -3px -3px);animation-timing-function:steps(12,end)} 100%{clip-path:inset(-3px -3px -3px -3px)}} @keyframes fl-caret{50%{opacity:0}} /* Glowing Tide (the bay's comb jellies light up at night): glowing specks drift round the name and its letters take their blue light in waves */ [data-fe="biolum"]{--fea:fl-biolum 3.6s ease-in-out infinite} [data-fe="biolum"]::before,[data-fe="biolum"]::after{content:"";position:absolute;inset:0 3px;pointer-events:none;mix-blend-mode:screen} [data-fe="biolum"]::before{background:radial-gradient(circle,#9ffcff 0 .8px,transparent 1.4px) 0 0/9px 5px,radial-gradient(circle,#4fd8ff 0 .7px,transparent 1.2px) 4px 2px/13px 6px; -webkit-mask:linear-gradient(transparent 55%,#000);mask:linear-gradient(transparent 55%,#000);animation:fl-tide 5s linear infinite,fl-glowpulse 3.6s ease-in-out infinite} [data-fe="biolum"]::after{background:radial-gradient(circle,#c9fff6 0 .7px,transparent 1.2px) 2px 1px/11px 7px,radial-gradient(circle,#2fd1b8 0 .8px,transparent 1.3px) 0 3px/7px 9px; -webkit-mask:linear-gradient(#000,transparent 50%);mask:linear-gradient(#000,transparent 50%);animation:fl-tide 7s linear infinite reverse,fl-glowpulse 3.6s ease-in-out -1.8s infinite} @keyframes fl-tide{to{background-position:63px 0,67px 2px,79px 1px,63px 3px}} @keyframes fl-glowpulse{0%,100%{opacity:.35}50%{opacity:1}} @keyframes fl-biolum{0%,100%{filter:drop-shadow(0 0 1px rgba(79,216,255,.4))}50%{filter:drop-shadow(0 0 3px #4fd8ff) drop-shadow(0 0 7px rgba(47,209,184,.6))}} /* 2026-W44, Halloween */ [data-fc="mulberry"]{--fc:#c13c8f} [data-fe="spider"]{padding-right:15px} [data-fe="spider"]::before{content:"";position:absolute;right:8px;top:0;width:1px;height:8px;pointer-events:none;background:rgba(230,235,245,.7)} [data-fe="spider"]::after{content:"";position:absolute;right:5px;top:8px;width:7px;height:6px;border-radius:50%;pointer-events:none; background:radial-gradient(circle at 35% 45%,#ff4d5e 0 .7px,transparent 1px),radial-gradient(circle at 65% 45%,#ff4d5e 0 .7px,transparent 1px),#1a1a22; box-shadow:0 0 0 1px #c6cee3,-2px 1px 0 -1px #c6cee3,2px 1px 0 -1px #c6cee3} [data-fc="candycorn"]{--fc:transparent;--fg:linear-gradient(180deg,#fff4dc 0 34%,#ff8a2a 34% 67%,#ffd23f 67%)} [data-fe="cobweb"]::before,[data-fe="cobweb"]::after{content:"";position:absolute;width:13px;height:13px;pointer-events:none;opacity:.85; background:conic-gradient(from 90deg at 0 0,#e6ebf5 0 5deg,transparent 5deg 27deg,#e6ebf5 27deg 33deg,transparent 33deg 57deg,#e6ebf5 57deg 63deg,transparent 63deg 85deg,#e6ebf5 85deg), radial-gradient(circle at 0 0,transparent 0 4.5px,#e6ebf5 4.5px 5.3px,transparent 5.3px 9px,#e6ebf5 9px 9.8px,transparent 9.8px)} [data-fe="cobweb"]::before{top:0;left:2px;border-bottom-right-radius:100%} [data-fe="cobweb"]::after{bottom:0;right:2px;border-bottom-right-radius:100%;transform:rotate(180deg)} [data-fe="haybale"]{padding-left:19px} [data-fe="haybale"]::before{content:"";position:absolute;left:5px;top:50%;width:11px;height:8px;margin-top:-4px;border-radius:2px;pointer-events:none; background:linear-gradient(90deg,transparent 2px,#8a5a20 2px 3px,transparent 3px 8px,#8a5a20 8px 9px,transparent 9px),repeating-linear-gradient(180deg,#e8c25a 0 2px,#c99a3a 2px 3px)} [data-fc="moonstone"]{--fc:transparent;--fg:linear-gradient(160deg,#f4f8ff 0%,#cfdcf5 35%,#9ab0e0 50%,#e8f0ff 65%,#bfd8ff 100%);filter:drop-shadow(0 0 3px rgba(150,190,255,.6))} [data-fe="eerie"] .fl-t{filter:drop-shadow(0 0 2px #7dff6a) drop-shadow(0 0 6px rgba(125,255,106,.55))} /* Witch's Brew: green and purple bubbling up through the letters */ [data-fc="potion"]{--fc:transparent;--fs:8px 12px,100% 200%;--fca:fl-brew 3s linear infinite;filter:drop-shadow(0 0 3px rgba(125,255,106,.55)); --fg:radial-gradient(circle at 50% 50%,rgba(240,255,230,.95) 0 .8px,transparent 1.3px),linear-gradient(180deg,#7dff6a,#3ddc84,#b07cff,#7a3fd0,#b07cff,#3ddc84,#7dff6a)} @keyframes fl-brew{to{background-position:0 -24px,0 200%}} /* Candlelight: a candle before the name, its flame flickering, the name lit warm with it */ [data-fe="candle"]{padding-left:16px;--fea:fl-candlelit 1.3s ease-in-out infinite} [data-fe="candle"]::before{content:"";position:absolute;left:6px;bottom:4px;width:5px;height:8px;border-radius:1px;pointer-events:none;background:linear-gradient(90deg,#d9ceb0,#fff8e6,#d9ceb0)} [data-fe="candle"]::after{content:"";position:absolute;left:6.5px;bottom:12px;width:4px;height:6px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;pointer-events:none;transform-origin:50% 100%; background:radial-gradient(circle at 50% 70%,#fff 0 1px,#ffd23f 1.5px,#ff8a2a 3px);box-shadow:0 0 5px 1px rgba(255,180,60,.7);animation:fl-candle 1.3s ease-in-out infinite} @keyframes fl-candle{0%,100%{transform:scale(1) skewX(0)}25%{transform:scale(.9,1.12) skewX(4deg)}50%{transform:scale(1.05,.92) skewX(-3deg)}75%{transform:scale(.95,1.06) skewX(2deg)}} @keyframes fl-candlelit{0%,100%{filter:drop-shadow(-2px 0 3px rgba(255,180,60,.6))}25%{filter:drop-shadow(-2px 0 4px rgba(255,190,70,.85))}50%{filter:drop-shadow(-1px 0 2px rgba(255,160,40,.45))}} /* Spectral: pale, half-there letters, glowing, with the light wandering through them */ [data-fc="spectral"]{--fc:transparent;--fs:200% 100%;--fca:fl-slide 3.5s linear infinite;filter:drop-shadow(0 0 3px rgba(170,255,220,.7)) drop-shadow(0 0 8px rgba(120,220,255,.35)); --fg:linear-gradient(100deg,rgba(225,255,242,.95),rgba(160,255,220,.35) 20%,rgba(240,250,255,.95) 40%,rgba(170,230,255,.3) 60%,rgba(230,255,245,.95) 80%,rgba(225,255,242,.95))} /* 2026-W45, anime (4.54.0): every loop divides 6 s, so a shared prize card loops cleanly */ [data-fc="matcha"]{--fc:#a9c46c} /* Anger Mark: the red cross-popping vein after the name, four arcs bowing in */ [data-fe="angermark"]{padding-right:17px} [data-fe="angermark"]::after{content:"";position:absolute;right:5px;top:50%;width:10px;height:10px;margin-top:-5px;pointer-events:none; background:radial-gradient(circle at 0 0,transparent 2.4px,#ff3b4a 2.6px 3.8px,transparent 4px) 0 0/4.6px 4.6px no-repeat, radial-gradient(circle at 100% 0,transparent 2.4px,#ff3b4a 2.6px 3.8px,transparent 4px) 100% 0/4.6px 4.6px no-repeat, radial-gradient(circle at 0 100%,transparent 2.4px,#ff3b4a 2.6px 3.8px,transparent 4px) 0 100%/4.6px 4.6px no-repeat, radial-gradient(circle at 100% 100%,transparent 2.4px,#ff3b4a 2.6px 3.8px,transparent 4px) 100% 100%/4.6px 4.6px no-repeat} /* Cel Shaded: a hero's orange, lit on top and hard-shaded under, like an anime frame's paint */ [data-fc="celshade"]{--fc:transparent;--fg:linear-gradient(172deg,#ffc067 0 54%,#f07c28 54%)} [data-fc="animesky"]{--fc:transparent;--fg:linear-gradient(180deg,#e6f7ff,#58b6ff 60%,#2f6fe0)} /* Sweat Drop: a blue drop at the name's top corner */ [data-fe="sweatdrop"]{padding-right:14px} [data-fe="sweatdrop"]::after{content:"";position:absolute;right:5px;top:2px;width:6px;height:6px;border-radius:0 50% 50% 50%;rotate:45deg;pointer-events:none; background:radial-gradient(circle at 40% 40%,#fff 0 .7px,transparent 1.1px),linear-gradient(135deg,#d6f2ff,#5ab8ff);box-shadow:0 0 0 .6px #2a6fc0} /* Mecha Armor: white plating over blue, a grey seam between the plates */ [data-fc="mecha"]{--fc:transparent;--fg:linear-gradient(180deg,#fff 0%,#e6ebf5 46%,#8f9bb5 50%,#4f7bff 55%,#2f55d0 82%,#6f95ff 100%); filter:drop-shadow(0 1px 0 rgba(0,0,0,.5)) drop-shadow(0 0 2px rgba(79,140,255,.45))} /* Blushing: pink cheeks with the hatch lines either side, and the name glowing pink between them */ [data-fe="blushing"]{padding-left:15px;padding-right:15px} [data-fe="blushing"]::before,[data-fe="blushing"]::after{content:"";position:absolute;top:50%;width:9px;height:6px;margin-top:-2px;pointer-events:none; background:repeating-linear-gradient(115deg,transparent 0 1.6px,#ff6f9f 1.6px 2.7px) 1.5px 1px/6px 4px no-repeat,radial-gradient(closest-side,rgba(255,111,159,.55),transparent)} [data-fe="blushing"]::before{left:4px} [data-fe="blushing"]::after{right:4px} [data-fe="blushing"] .fl-t{filter:drop-shadow(0 0 2px rgba(255,122,168,.45))} /* Neo-Tokyo: red, magenta and cyan neon running through the letters, split at the edges like an old screen */ [data-fc="neotokyo"]{--fc:transparent;--fs:200% 100%;--fca:fl-slide 3s linear infinite; filter:drop-shadow(-.6px 0 0 rgba(255,42,77,.5)) drop-shadow(.6px 0 0 rgba(79,216,255,.5)) drop-shadow(0 0 3px rgba(255,79,216,.4)); --fg:linear-gradient(90deg,#ff2a4d,#ff4fd8,#9a6bff,#4fd8ff,#ff4fd8,#ff2a4d)} /* Anime Glint: a star pings on the name, then another, and the letters flash white with each */ [data-fe="glint"]{--fea:fl-glintflash 1.5s ease-out infinite} [data-fe="glint"]::before,[data-fe="glint"]::after{content:"";position:absolute;width:9px;height:9px;pointer-events:none;scale:0; clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);background:radial-gradient(circle,#fff 0 25%,#fff7c2 45%,#ffe14d);animation:fl-glint 3s ease-out infinite} [data-fe="glint"]::before{left:18%;top:0} [data-fe="glint"]::after{right:3px;top:1px;animation-delay:-1.5s} @keyframes fl-glint{0%,52%{scale:0;rotate:0deg}60%{scale:1.25;rotate:45deg}68%{scale:.85;rotate:70deg}76%,100%{scale:0;rotate:90deg}} @keyframes fl-glintflash{0%,12%,36%,100%{filter:drop-shadow(0 0 0 rgba(255,255,255,0))}20%{filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 3px rgba(255,255,255,.9))}} /* Power Up: gold aura streaks rising through the name, lightning crackling round it, and the name glowing gold */ [data-fe="powerup"]{--fea:fl-powerglow 1.5s ease-in-out infinite} [data-fe="powerup"]::before{content:"";position:absolute;inset:0 3px;pointer-events:none;animation:fl-kirise .75s linear infinite; -webkit-mask:linear-gradient(to top,transparent,#000 20% 70%,transparent);mask:linear-gradient(to top,transparent,#000 20% 70%,transparent); background:radial-gradient(1px 4px,#fff4b0,transparent) 0 0/13px 13px,radial-gradient(.8px 4.5px,rgba(255,200,50,.95),transparent) 6px 5px/19px 17px} [data-fe="powerup"]::after{content:"";position:absolute;width:6px;height:10px;pointer-events:none;opacity:0; clip-path:polygon(40% 0,100% 0,60% 40%,90% 40%,20% 100%,45% 55%,10% 55%);background:linear-gradient(#fff,#9ad5ff);animation:fl-crackle 3s linear infinite} @keyframes fl-kirise{to{background-position:0 -26px,6px -12px}} @keyframes fl-crackle{0%,3%,6%,9%{opacity:1;left:12%;top:1px;rotate:0deg}1.5%,4.5%,7.5%{opacity:.3}9.1%,33%{opacity:0;left:12%;top:1px} 33.1%,36%,39%,42%{opacity:1;left:62%;top:4px;rotate:160deg}34.5%,37.5%,40.5%{opacity:.3}42.1%,66%{opacity:0;left:62%;top:4px} 66.1%,69%,72%,75%{opacity:1;left:38%;top:2px;rotate:35deg}67.5%,70.5%,73.5%{opacity:.3}75.1%,100%{opacity:0;left:38%;top:2px}} @keyframes fl-powerglow{0%,100%{filter:drop-shadow(0 0 2px rgba(255,214,60,.7))}50%{filter:drop-shadow(0 0 2px #ffe14d) drop-shadow(0 -1px 4px rgba(255,180,40,.7))}} /* ---- 4.48.0: Team Red and Team Blue (gridlock.py FLAIR), all four Legendary. No logos or brand names (owner, 2026-10-09): their colours and fizz only ---- */ /* Team Blue and Team Red (4.48.5, owner: "a better colour"): candy gloss. A shine across the top of the letters and shade under them (the first layer, still), over the team's shades flowing slowly through the name (the second, one tile a loop); a dark edge so it reads, and a wide glow in the team's colour. No dots, no logos. */ [data-fc="pepsi"],[data-fc="coke"]{--fc:transparent;--fs:100% 100%,200% 100%;--fca:fl-teamflow 4.5s linear infinite} [data-fc="pepsi"]{filter:drop-shadow(0 1px 0 rgba(0,0,0,.55)) drop-shadow(0 0 4px rgba(58,134,255,.75)) drop-shadow(0 0 9px rgba(58,200,255,.3)); --fg:linear-gradient(180deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,.18) 40%,rgba(255,255,255,0) 52%,rgba(0,10,40,.22) 100%), linear-gradient(100deg,#2f7bff,#39d0ff,#7a8cff,#1a5cff,#53b4ff,#2f7bff)} [data-fc="coke"]{filter:drop-shadow(0 1px 0 rgba(0,0,0,.55)) drop-shadow(0 0 4px rgba(255,37,48,.75)) drop-shadow(0 0 9px rgba(255,90,60,.3)); --fg:linear-gradient(180deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,.18) 40%,rgba(255,255,255,0) 52%,rgba(40,0,0,.22) 100%), linear-gradient(100deg,#ff2232,#ff6a3d,#ff2f74,#d1001a,#ff4a4a,#ff2232)} @keyframes fl-teamflow{to{background-position:0 0,-200% 0}} /* Team Blue Fizz and Team Red Fizz (4.48.4, owner: random fizz, not a clump each side): bubbles scattered over the whole name, six lattices of odd sizes (two layers of three, each layer on its own clock) rising at different speeds, some drifting, fading out towards the top; the name pulses in the team's colour */ [data-fe="pepsiglobe"]{--b1:rgba(200,225,255,.95);--b2:rgba(120,180,255,.85);--b3:rgba(255,255,255,.8);--fea:fl-pepsiglow 2s ease-in-out infinite} [data-fe="cokecan"]{--b1:rgba(255,200,205,.95);--b2:rgba(255,90,100,.85);--b3:rgba(255,255,255,.8);--fea:fl-redglow 2s ease-in-out infinite} :is([data-fe="pepsiglobe"],[data-fe="cokecan"])::before,:is([data-fe="pepsiglobe"],[data-fe="cokecan"])::after{content:"";position:absolute;inset:0 4px;pointer-events:none; mix-blend-mode:screen;-webkit-mask:linear-gradient(to top,transparent,#000 25% 45%,transparent);mask:linear-gradient(to top,transparent,#000 25% 45%,transparent)} :is([data-fe="pepsiglobe"],[data-fe="cokecan"])::before{animation:fl-fizza 2.3s linear infinite; background:radial-gradient(circle at 20% 70%,var(--b1) 0 .9px,transparent 1.4px) 0 0/17px 23px,radial-gradient(circle at 70% 30%,var(--b2) 0 .7px,transparent 1.2px) 5px 9px/27px 31px, radial-gradient(circle at 45% 55%,var(--b3) 0 1.1px,transparent 1.6px) 11px 3px/37px 19px} :is([data-fe="pepsiglobe"],[data-fe="cokecan"])::after{animation:fl-fizzb 3.1s linear infinite; background:radial-gradient(circle at 60% 40%,var(--b2) 0 .8px,transparent 1.3px) 8px 4px/23px 29px,radial-gradient(circle at 30% 80%,var(--b1) 0 1px,transparent 1.5px) 14px 12px/31px 17px, radial-gradient(circle at 80% 20%,var(--b3) 0 .6px,transparent 1.1px) 3px 7px/41px 37px} @keyframes fl-fizza{from{background-position:0 0,5px 9px,11px 3px}to{background-position:0 -46px,-22px -84px,11px -35px}} @keyframes fl-fizzb{from{background-position:8px 4px,14px 12px,3px 7px}to{background-position:8px -54px,45px -56px,3px -67px}} @keyframes fl-pepsiglow{0%,100%{filter:drop-shadow(0 0 1px rgba(58,134,255,.5))}50%{filter:drop-shadow(0 0 3px #3a86ff) drop-shadow(0 0 7px rgba(58,134,255,.55))}} @keyframes fl-redglow{0%,100%{filter:drop-shadow(0 0 1px rgba(255,37,48,.5))}50%{filter:drop-shadow(0 0 3px #ff2530) drop-shadow(0 0 7px rgba(255,37,48,.55))}} /* ---- 4.53.0: a feminine set (gridlock.py PRETTY_FLAIR), out with W42's drop, on the weekly ones' rules. Every loop divides 6 s, so a shared prize card loops cleanly ---- */ [data-fc="lilac"]{--fc:#e2a8ff} /* Hair Bow: a pink bow before the name */ [data-fe="bow"]{padding-left:20px} [data-fe="bow"]::before{content:"";position:absolute;left:5px;top:50%;width:13px;height:9px;margin-top:-4.5px;pointer-events:none; clip-path:polygon(0 8%,12% 0,40% 26%,60% 26%,88% 0,100% 8%,96% 50%,100% 92%,88% 100%,60% 74%,40% 74%,12% 100%,0 92%,4% 50%); background:radial-gradient(circle,#ffd6e6 0 .7px,#ff4d8d 1px 2.1px,transparent 2.3px),linear-gradient(90deg,#ff9ac6,#ff5c9a 38% 62%,#ff9ac6)} [data-fc="pinklemonade"]{--fc:transparent;--fg:linear-gradient(90deg,#ff6f9f,#ffe66b)} /* Ballet Slipper: pale satin pink, its sheen down the letters */ [data-fc="ballet"]{--fc:transparent;--fg:linear-gradient(180deg,#fff0f5 0%,#ffc9da 45%,#ee9ab6 100%)} /* String of Pearls: a strand of pearls under the name, each with its own shine */ [data-fe="necklace"]::after{content:"";position:absolute;left:7px;right:7px;bottom:0;height:5px;pointer-events:none; background:radial-gradient(circle at 1.8px 1.9px,#fff 0 .5px,transparent .9px) 0 0/4.5px 5px round, radial-gradient(circle at 2.25px 2.5px,#f6f0e6 0 1px,#d8ccba 1.6px,#b3a48e 2px,transparent 2.2px) 0 0/4.5px 5px round} [data-fc="rosequartz"]{--fc:transparent;--fg:linear-gradient(160deg,#fff0f6 0%,#ffb3cf 35%,#c2577f 52%,#ffc4da 70%,#fff3f8 100%);filter:drop-shadow(0 0 2px rgba(255,150,190,.5))} /* Tiara: a silver tiara with a pink stone over the name, the letters lit softly under it */ [data-fe="tiara"]::before{content:"";position:absolute;left:50%;top:0;width:15px;height:6px;margin-left:-7.5px;pointer-events:none; clip-path:polygon(0 100%,4% 45%,20% 72%,33% 22%,44% 62%,50% 0,56% 62%,67% 22%,80% 72%,96% 45%,100% 100%); background:radial-gradient(circle at 50% 66%,#ff4d8d 0 1.1px,transparent 1.4px),linear-gradient(180deg,#fff,#e6e9f2 45%,#aab2c8)} [data-fe="tiara"] .fl-t{filter:drop-shadow(0 0 2px rgba(255,190,220,.55))} /* Unicorn: pastel rainbow flowing through the letters */ [data-fc="unicorn"]{--fc:transparent;--fs:200% 100%;--fca:fl-slide 3s linear infinite;filter:drop-shadow(0 0 3px rgba(255,182,230,.6)); --fg:linear-gradient(90deg,#ff9ad5,#ffc79a,#fff3a0,#a8f5c8,#9ad8ff,#c9a6ff,#ff9ad5)} /* Butterflies: a pink one over the name and a lilac one under it, fluttering across opposite ways */ [data-fe="butterflies"]::before,[data-fe="butterflies"]::after{content:"";position:absolute;width:12px;height:9px;pointer-events:none; clip-path:polygon(50% 25%,38% 2%,14% 0,0 14%,8% 42%,24% 52%,10% 72%,18% 96%,38% 92%,50% 62%,62% 92%,82% 96%,90% 72%,76% 52%,92% 42%,100% 14%,86% 0,62% 2%); animation:fl-wings .25s ease-in-out infinite alternate,fl-flutter 6s linear infinite} [data-fe="butterflies"]::before{top:0;background:linear-gradient(90deg,transparent 44%,#6a2a52 44% 56%,transparent 56%),linear-gradient(180deg,#ffc2e2,#ff6fb3)} [data-fe="butterflies"]::after{bottom:0;background:linear-gradient(90deg,transparent 44%,#3e2a66 44% 56%,transparent 56%),linear-gradient(180deg,#e6d4ff,#a888ff); animation-delay:-.12s,-3s;animation-direction:alternate,reverse} @keyframes fl-wings{from{scale:1 1}to{scale:.5 1}} @keyframes fl-flutter{0%{left:0;opacity:0;translate:0 1px;rotate:-8deg}8%{opacity:1}20%{translate:0 -2px;rotate:6deg}35%{translate:0 2px;rotate:-6deg} 50%{translate:0 -1px;rotate:8deg}65%{translate:0 2px;rotate:-4deg}80%{translate:0 -2px;rotate:6deg}92%{opacity:1}100%{left:calc(100% - 12px);opacity:0;translate:0 1px;rotate:-8deg}} /* Branch Brook Blossoms (Newark's park has more cherry trees than Washington): a blossom turning before the name, petals drifting down across it one at a time, each from its own spot, at its own pace and sway (4.54.1, owner: not all together), and the name glowing pink in time. app.js flairName adds the petals (.fl-bb-petals b). */ [data-fe="blossoms"]{padding-left:19px;--fea:fl-bloom 3s ease-in-out infinite} [data-fe="blossoms"]::before{content:"";position:absolute;left:5px;top:50%;width:11px;height:11px;margin-top:-5.5px;pointer-events:none;animation:fl-turnflower 6s linear infinite; background:radial-gradient(circle at 5.5px 5.5px,#ffe36e 0 .9px,#ff6fa5 1.2px 1.9px,transparent 2.1px), radial-gradient(circle at 5.5px 2.6px,#ffd6e4 0 2.2px,transparent 2.5px),radial-gradient(circle at 8.3px 4.6px,#ffc4d8 0 2.2px,transparent 2.5px), radial-gradient(circle at 7.2px 7.9px,#ffd6e4 0 2.2px,transparent 2.5px),radial-gradient(circle at 3.8px 7.9px,#ffc4d8 0 2.2px,transparent 2.5px), radial-gradient(circle at 2.7px 4.6px,#ffd6e4 0 2.2px,transparent 2.5px)} [data-fe="blossoms"] .fl-bb-petals{inset:0 3px 0 16px;z-index:1} /* each petal falls the height of the name, swaying one way and back and turning as it goes; their clocks (1.5 to 6 s, all dividing 6) and starts differ, so they never fall as one */ [data-fe="blossoms"] .fl-bb-petals b{position:absolute;top:-15%;left:var(--x);display:block;width:max(4px,.28em);height:max(3px,.21em);border-radius:0 100% 0 100%;opacity:0; background:var(--c,#ffc4d8);animation:fl-bb-fall var(--t) linear var(--d) infinite} .fl-bb-petals b:nth-of-type(1){--x:3%;--t:3s;--d:-.4s;--dx:4px;--r:150deg} .fl-bb-petals b:nth-of-type(2){--x:21%;--t:2s;--d:-1.3s;--dx:-3px;--r:-120deg;--c:#ffd6e4} .fl-bb-petals b:nth-of-type(3){--x:38%;--t:6s;--d:-2.2s;--dx:5px;--r:220deg;--c:#ffb3cc} .fl-bb-petals b:nth-of-type(4){--x:52%;--t:3s;--d:-2.5s;--dx:-4px;--r:-180deg;--c:#fff0f5} .fl-bb-petals b:nth-of-type(5){--x:67%;--t:1.5s;--d:-.9s;--dx:3px;--r:110deg} .fl-bb-petals b:nth-of-type(6){--x:81%;--t:2s;--d:-.2s;--dx:-5px;--r:-200deg;--c:#ffd6e4} .fl-bb-petals b:nth-of-type(7){--x:93%;--t:3s;--d:-1.6s;--dx:4px;--r:160deg;--c:#ffb3cc} @keyframes fl-turnflower{to{rotate:360deg}} @keyframes fl-bb-fall{0%{top:-15%;opacity:0;translate:0 0;rotate:0deg;animation-timing-function:linear}12%{opacity:1} 40%{translate:var(--dx) 0;animation-timing-function:ease-in-out}75%{translate:calc(var(--dx) * -.5) 0;animation-timing-function:ease-in-out} 88%{opacity:.9}100%{top:85%;opacity:0;translate:calc(var(--dx) * .3) 0;rotate:var(--r)}} @keyframes fl-bloom{0%,100%{filter:drop-shadow(0 0 1px rgba(255,150,190,.45))}50%{filter:drop-shadow(0 0 2px #ff8fbf) drop-shadow(0 0 4px rgba(255,170,205,.45))}} @media (prefers-reduced-motion:reduce){.flair .fl-t,.flair .fl-l,.flair .fl-m,.flair::before,.flair::after,.flair .fl-p,.flair .fl-p *,.flair .fl-p::before{animation:none!important}} /* 4.80.0: country flags (gridlock.py FLAGS), a Common mark before the name: flag-icons' 4:3 pictures in flags/ (MIT, flags/LICENSE), relative to this sheet so Beats To Beats finds them too */ [data-fe^="flag"]{padding-left:23px} [data-fe^="flag"]::before{content:"";position:absolute;left:5px;top:50%;width:14px;height:10.5px;margin-top:-5.25px;border-radius:1.5px;pointer-events:none;background:#3a4256 center/cover no-repeat;box-shadow:0 0 0 .5px rgba(247,243,230,.4)} [data-fe="flagin"]::before{background-image:url(flags/in.svg)} [data-fe="flagcn"]::before{background-image:url(flags/cn.svg)} [data-fe="flagus"]::before{background-image:url(flags/us.svg)} [data-fe="flagid"]::before{background-image:url(flags/id.svg)} [data-fe="flagpk"]::before{background-image:url(flags/pk.svg)} [data-fe="flagng"]::before{background-image:url(flags/ng.svg)} [data-fe="flagbr"]::before{background-image:url(flags/br.svg)} [data-fe="flagbd"]::before{background-image:url(flags/bd.svg)} [data-fe="flagru"]::before{background-image:url(flags/ru.svg)} [data-fe="flaget"]::before{background-image:url(flags/et.svg)} [data-fe="flagmx"]::before{background-image:url(flags/mx.svg)} [data-fe="flagjp"]::before{background-image:url(flags/jp.svg)} [data-fe="flageg"]::before{background-image:url(flags/eg.svg)} [data-fe="flagph"]::before{background-image:url(flags/ph.svg)} [data-fe="flagcd"]::before{background-image:url(flags/cd.svg)} [data-fe="flagvn"]::before{background-image:url(flags/vn.svg)} [data-fe="flagir"]::before{background-image:url(flags/ir.svg)} [data-fe="flagtr"]::before{background-image:url(flags/tr.svg)} [data-fe="flagde"]::before{background-image:url(flags/de.svg)} [data-fe="flagth"]::before{background-image:url(flags/th.svg)} [data-fe="flagtz"]::before{background-image:url(flags/tz.svg)} [data-fe="flaggb"]::before{background-image:url(flags/gb.svg)} [data-fe="flagfr"]::before{background-image:url(flags/fr.svg)} [data-fe="flagza"]::before{background-image:url(flags/za.svg)} [data-fe="flagit"]::before{background-image:url(flags/it.svg)} [data-fe="flagke"]::before{background-image:url(flags/ke.svg)} [data-fe="flagmm"]::before{background-image:url(flags/mm.svg)} [data-fe="flagco"]::before{background-image:url(flags/co.svg)} [data-fe="flagkr"]::before{background-image:url(flags/kr.svg)} [data-fe="flagsd"]::before{background-image:url(flags/sd.svg)} [data-fe="flagug"]::before{background-image:url(flags/ug.svg)} [data-fe="flages"]::before{background-image:url(flags/es.svg)} [data-fe="flagdz"]::before{background-image:url(flags/dz.svg)} [data-fe="flagiq"]::before{background-image:url(flags/iq.svg)} [data-fe="flagar"]::before{background-image:url(flags/ar.svg)} [data-fe="flagaf"]::before{background-image:url(flags/af.svg)} [data-fe="flagye"]::before{background-image:url(flags/ye.svg)} [data-fe="flagca"]::before{background-image:url(flags/ca.svg)} [data-fe="flagao"]::before{background-image:url(flags/ao.svg)} [data-fe="flagua"]::before{background-image:url(flags/ua.svg)} [data-fe="flagma"]::before{background-image:url(flags/ma.svg)} [data-fe="flagpl"]::before{background-image:url(flags/pl.svg)} [data-fe="flaguz"]::before{background-image:url(flags/uz.svg)} [data-fe="flagmy"]::before{background-image:url(flags/my.svg)} [data-fe="flagmz"]::before{background-image:url(flags/mz.svg)} [data-fe="flaggh"]::before{background-image:url(flags/gh.svg)} [data-fe="flagpe"]::before{background-image:url(flags/pe.svg)} [data-fe="flagsa"]::before{background-image:url(flags/sa.svg)} [data-fe="flagmg"]::before{background-image:url(flags/mg.svg)} [data-fe="flagci"]::before{background-image:url(flags/ci.svg)} [data-fe="flagnp"]::before{background-image:url(flags/np.svg)} [data-fe="flagcm"]::before{background-image:url(flags/cm.svg)} [data-fe="flagve"]::before{background-image:url(flags/ve.svg)} [data-fe="flagne"]::before{background-image:url(flags/ne.svg)} [data-fe="flagau"]::before{background-image:url(flags/au.svg)} [data-fe="flagkp"]::before{background-image:url(flags/kp.svg)} [data-fe="flagsy"]::before{background-image:url(flags/sy.svg)} [data-fe="flagml"]::before{background-image:url(flags/ml.svg)} [data-fe="flagbf"]::before{background-image:url(flags/bf.svg)} [data-fe="flagtw"]::before{background-image:url(flags/tw.svg)} [data-fe="flaglk"]::before{background-image:url(flags/lk.svg)} [data-fe="flagmw"]::before{background-image:url(flags/mw.svg)} [data-fe="flagzm"]::before{background-image:url(flags/zm.svg)} [data-fe="flagkz"]::before{background-image:url(flags/kz.svg)} [data-fe="flagtd"]::before{background-image:url(flags/td.svg)} [data-fe="flagcl"]::before{background-image:url(flags/cl.svg)} [data-fe="flagro"]::before{background-image:url(flags/ro.svg)} [data-fe="flagso"]::before{background-image:url(flags/so.svg)} [data-fe="flagsn"]::before{background-image:url(flags/sn.svg)} [data-fe="flaggt"]::before{background-image:url(flags/gt.svg)} [data-fe="flagnl"]::before{background-image:url(flags/nl.svg)} [data-fe="flagec"]::before{background-image:url(flags/ec.svg)} [data-fe="flagkh"]::before{background-image:url(flags/kh.svg)} [data-fe="flagzw"]::before{background-image:url(flags/zw.svg)} [data-fe="flaggn"]::before{background-image:url(flags/gn.svg)} [data-fe="flagbj"]::before{background-image:url(flags/bj.svg)} [data-fe="flagrw"]::before{background-image:url(flags/rw.svg)} [data-fe="flagbi"]::before{background-image:url(flags/bi.svg)} [data-fe="flagbo"]::before{background-image:url(flags/bo.svg)} [data-fe="flagtn"]::before{background-image:url(flags/tn.svg)} [data-fe="flagss"]::before{background-image:url(flags/ss.svg)} [data-fe="flaght"]::before{background-image:url(flags/ht.svg)} [data-fe="flagbe"]::before{background-image:url(flags/be.svg)} [data-fe="flagjo"]::before{background-image:url(flags/jo.svg)} [data-fe="flagdo"]::before{background-image:url(flags/do.svg)} [data-fe="flagae"]::before{background-image:url(flags/ae.svg)} [data-fe="flagcu"]::before{background-image:url(flags/cu.svg)} [data-fe="flaghn"]::before{background-image:url(flags/hn.svg)} [data-fe="flagse"]::before{background-image:url(flags/se.svg)} [data-fe="flagcz"]::before{background-image:url(flags/cz.svg)} [data-fe="flagpg"]::before{background-image:url(flags/pg.svg)} [data-fe="flagtj"]::before{background-image:url(flags/tj.svg)} [data-fe="flaggr"]::before{background-image:url(flags/gr.svg)} [data-fe="flagpt"]::before{background-image:url(flags/pt.svg)} [data-fe="flagaz"]::before{background-image:url(flags/az.svg)} [data-fe="flaghu"]::before{background-image:url(flags/hu.svg)} [data-fe="flagil"]::before{background-image:url(flags/il.svg)} [data-fe="flagtg"]::before{background-image:url(flags/tg.svg)} [data-fe="flagat"]::before{background-image:url(flags/at.svg)} [data-fe="flagby"]::before{background-image:url(flags/by.svg)}