/* Baller word stickers (words.js, 13 Nov): chunky slanted slang with a 3D edge, a shine and the double underline */
.bw{position:relative;display:inline-flex;flex-direction:column;align-items:stretch;font:900 15px/1 Nunito,system-ui,sans-serif;letter-spacing:.01em;white-space:nowrap;transform:skewX(-9deg);vertical-align:middle}
.bw b{display:block;color:var(--c);font-weight:900;text-shadow:.04em .04em 0 var(--d),.08em .08em 0 var(--d),.12em .12em 0 var(--d),.14em .2em .18em rgba(20,20,40,.28)}
.bw::before{content:attr(data-t);position:absolute;left:0;top:0;color:transparent;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.85) 50%,transparent 62%) 120% 0/260% 100% no-repeat;-webkit-background-clip:text;background-clip:text;pointer-events:none;animation:bwShine 2.6s ease-in-out infinite;animation-delay:var(--sd,0s)}
.bw i{display:block;height:.5em;margin:.12em -.04em 0 .1em;border-top:.15em solid var(--c);border-bottom:.15em solid var(--c);transform:rotate(-2.5deg);transform-origin:left;filter:drop-shadow(.08em .08em 0 var(--d))}
@keyframes bwShine{0%,55%{background-position:120% 0}85%,100%{background-position:-60% 0}}

/* the Words tab in the sticker tray */
.fd-tray .bw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:300px;max-width:100%}
.fd-tray .bw-t{display:flex;align-items:center;justify-content:center;width:auto;height:50px;padding:0 2px;border-radius:14px;background:#F7F7FA}
.fd-tray .bw-t.on{background:#FFF0EC;box-shadow:inset 0 0 0 2px #FF9A8A}
.fd-tray .bw-t .bw{animation:bwBob 2.2s ease-in-out infinite}
.fd-tray .bw-t:nth-child(3n+2) .bw{animation-delay:-.7s;--sd:.4s}.fd-tray .bw-t:nth-child(3n) .bw{animation-delay:-1.4s;--sd:.8s}
.fd-tray .bw-t:active .bw{transform:skewX(-9deg) scale(1.2)}
@keyframes bwBob{0%,100%{transform:skewX(-9deg) translateY(0) rotate(-1deg)}50%{transform:skewX(-9deg) translateY(-2px) rotate(1.5deg)}}
.bw-chip .bw-mini{display:inline-flex;height:24px;align-items:center;padding:0 1px 0 3px}
.bw-chip .bw-mini .bw{font-size:9px}
.bw-chip.on{border-color:#FF9A8A!important;background:#FFF3F0!important;color:#E0503F}

/* chosen: the sticker sits in the reaction button */
.fd-rb .bw,.rx-stb .bw{font-size:12.5px;margin:0 2px}

/* the big landing */
.bw-burst{position:absolute;z-index:7;width:0;height:0;pointer-events:none}
.bw-burst .bw-big{position:absolute;left:0;top:0;font-size:46px;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #fff);animation:bwLand 1.6s cubic-bezier(.25,1,.4,1) forwards}
.bw-burst .bw-big::before{animation:bwShine1 .7s ease-in-out .5s forwards}
.bw-burst .bw-big i{height:.42em;margin-top:.04em;transform:rotate(-2.5deg) scaleX(0);animation:bwLine .32s cubic-bezier(.3,1.4,.5,1) .38s forwards}
.bw-glow{position:absolute;left:-110px;top:-110px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c) 40%,transparent),transparent 65%);opacity:0;animation:bwGlow 1.4s ease-out forwards}
.bw-bit{position:absolute;left:-4px;top:-3px;width:9px;height:6px;border-radius:2px;background:var(--c);opacity:0;animation:bwBit .9s cubic-bezier(.2,.8,.3,1) var(--dl) forwards;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.bw-x{position:absolute;left:-14px;top:-14px;font-size:26px;font-style:normal;opacity:0;animation:bwX 1.1s ease-out var(--dl) forwards}
@keyframes bwLand{
  0%{transform:translate(-50%,-50%) perspective(420px) rotateX(78deg) rotateZ(-16deg) skewX(-9deg) scale(.25);opacity:0}
  30%{transform:translate(-50%,-50%) perspective(420px) rotateX(-14deg) rotateZ(5deg) skewX(-9deg) scale(1.2);opacity:1}
  44%{transform:translate(-50%,-50%) perspective(420px) rotateX(8deg) rotateZ(-2deg) skewX(-9deg) scale(.95)}
  56%{transform:translate(-50%,-50%) perspective(420px) rotateX(0) rotateY(-10deg) rotateZ(-3deg) skewX(-9deg) scale(1.04)}
  78%{transform:translate(-50%,-50%) perspective(420px) rotateY(6deg) rotateZ(-3deg) skewX(-9deg) scale(1.02);opacity:1}
  100%{transform:translate(-50%,-120%) perspective(420px) rotateY(0) rotateZ(-3deg) skewX(-9deg) scale(.7);opacity:0}}
@keyframes bwShine1{from{background-position:120% 0}to{background-position:-60% 0}}
@keyframes bwLine{to{transform:rotate(-2.5deg) scaleX(1)}}
@keyframes bwGlow{0%{opacity:0;transform:scale(.3)}30%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.25)}}
@keyframes bwBit{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 40px)) rotate(var(--r))}}
@keyframes bwX{0%{opacity:0;transform:translate(0,10px) scale(.3)}30%{opacity:1;transform:translate(calc(var(--dx) * .8),-46px) scale(1.1)}100%{opacity:0;transform:translate(var(--dx),-90px) scale(.9)}}
@media (prefers-reduced-motion:reduce){.bw::before,.fd-tray .bw-t .bw{animation:none!important}.bw-burst .bw-big{animation-duration:.01s}.bw-bit,.bw-x{display:none}}