/* WCI animated icons (js/wci.js). Size follows the surrounding font size, so they replace emoji one-for-one. */
.wcii{display:inline-flex;vertical-align:-.2em;line-height:0}
.wci{width:1.18em;height:1.18em;display:inline-block;overflow:visible;filter:drop-shadow(0 1.5px 1.5px rgba(0,0,0,.28))}
.wci *{transform-box:fill-box;transform-origin:center}
.wi-spin{animation:wSpin 5s ease-in-out infinite}
@keyframes wSpin{0%,72%,100%{transform:scaleX(1)}86%{transform:scaleX(.12)}}
.wi-shine{animation:wShine 3.4s ease-in-out infinite}
@keyframes wShine{0%,45%{transform:translateX(0) rotate(20deg)}85%,100%{transform:translateX(64px) rotate(20deg)}}
.wi-pulse{animation:wPulse 2.2s ease-in-out infinite}
@keyframes wPulse{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.1) rotate(4deg)}}
.wi-tw{animation:wTw 2s ease-in-out infinite;transform-origin:center}.wi-d2 .wi-tw,.wi-d2{animation-delay:-1s}
@keyframes wTw{0%,100%{opacity:.15;transform:scale(.4)}50%{opacity:1;transform:scale(1.15)}}
.wi-wig{transform-origin:50% 100%;animation:wWig 4s ease-in-out infinite}
@keyframes wWig{0%,82%,100%{transform:rotate(0)}86%{transform:rotate(-9deg)}90%{transform:rotate(8deg)}94%{transform:rotate(-4deg)}}
.wi-wig2{animation:wWig2 3.6s ease-in-out infinite}
@keyframes wWig2{0%,70%,100%{transform:rotate(0) scale(1)}80%{transform:rotate(-8deg) scale(1.06)}90%{transform:rotate(6deg) scale(1.06)}}
.wi-hop{animation:wHop 2.8s ease-in-out infinite}
@keyframes wHop{0%,60%,100%{transform:translateY(0)}70%{transform:translateY(-3px)}80%{transform:translateY(0)}88%{transform:translateY(-1.5px)}}
.wi-bow{animation:wBow 2.8s ease-in-out infinite}@keyframes wBow{0%,60%,100%{transform:scale(1)}72%{transform:scale(1.1,.92)}}
.wi-lid{transform-origin:0 100%;animation:wLid 3.2s ease-in-out infinite}
@keyframes wLid{0%,55%,100%{transform:rotate(0)}68%,80%{transform:rotate(-14deg)}}
.wi-swing{transform-origin:50% 0;animation:wSwing 3s ease-in-out infinite}
@keyframes wSwing{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.wi-beat{animation:wBeat 1.3s ease-in-out infinite}
@keyframes wBeat{0%,100%{transform:scale(1)}15%{transform:scale(1.13)}30%{transform:scale(1)}45%{transform:scale(1.08)}}
.wi-flick{animation:wFlick 1.6s ease-in-out infinite}
@keyframes wFlick{0%,100%{transform:scale(1) rotate(0);filter:brightness(1)}20%{transform:scale(1.06) rotate(-3deg);filter:brightness(1.25)}40%{transform:scale(.96) rotate(2deg)}60%{transform:scale(1.05) rotate(3deg);filter:brightness(1.2)}}
.wi-flk{transform-origin:50% 100%;animation:wFlk .9s ease-in-out infinite alternate}
@keyframes wFlk{from{transform:scale(1,1) skewX(-3deg)}to{transform:scale(.93,1.08) skewX(4deg)}}
.wi-bob{animation:wBob 2.6s ease-in-out infinite}
@keyframes wBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(-3deg)}}
.wi-write{animation:wWrite 2.4s ease-in-out infinite}
@keyframes wWrite{0%,100%{transform:translate(-2px,0) rotate(-3deg)}50%{transform:translate(4px,-1px) rotate(3deg)}}
.wi-line{stroke-dasharray:100;stroke-dashoffset:100;animation:wLine 2.4s ease-in-out infinite}
@keyframes wLine{0%{stroke-dashoffset:100}55%,100%{stroke-dashoffset:0}}
.wi-bub{animation:wBub 2s ease-in infinite}.wi-bub.b2{animation-delay:-.7s}.wi-bub.b3{animation-delay:-1.3s}
@keyframes wBub{0%{transform:translateY(0) scale(1);opacity:0}20%{opacity:.9}100%{transform:translateY(-14px) scale(.5);opacity:0}}
.wi-liq{animation:wLiq 2.6s ease-in-out infinite}@keyframes wLiq{0%,100%{transform:translateY(0)}50%{transform:translateY(-1px) skewX(2deg)}}
@media(prefers-reduced-motion:reduce){.wci *{animation:none!important}.wi-line{stroke-dashoffset:0}}

.wi-needle{animation:wNeedle 3s ease-in-out infinite}@keyframes wNeedle{0%,100%{transform:rotate(-25deg)}50%{transform:rotate(30deg)}}
.wi-flag{transform-origin:0 50%;animation:wFlag 1.8s ease-in-out infinite}@keyframes wFlag{0%,100%{transform:scaleX(1) skewY(0)}50%{transform:scaleX(.9) skewY(4deg)}}
.wi-jet{animation:wJet .5s linear infinite}@keyframes wJet{0%,100%{transform:translate(-.6px,.6px)}50%{transform:translate(.6px,-.8px)}}
.wi-run{animation:wRun .5s ease-in-out infinite alternate}@keyframes wRun{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-2px) rotate(3deg)}}
.wi-flap{transform-origin:100% 50%;animation:wFlap .6s ease-in-out infinite alternate}@keyframes wFlap{from{transform:rotate(-12deg)}to{transform:rotate(14deg)}}
.wi-bounce{animation:wBounce 1.2s ease-in infinite}@keyframes wBounce{0%,100%{transform:translateY(-3px)}50%{transform:translateY(2px) scale(1.04,.94)}}
.pill .tbi{display:inline-flex;width:20px;height:20px}.pill .tbi .wcii,.pill .tbi .wci{width:20px;height:20px}

/* centring: icons inside round/square tiles sit dead-centre */
.qb,.tile,.ico,.we,.gtile .thumb .em,.pod .em,.lesson .em{line-height:1}
.qb .wcii,.tile .wcii,.ico .wcii,.we .wcii,.pod .em .wcii,.lesson .em .wcii{display:flex;align-items:center;justify-content:center;vertical-align:0}
.qb .wci{width:1.32em;height:1.32em}
.tile .wci,.ico .wci{width:1.25em;height:1.25em}
/* in-game HUD */
.wcii{vertical-align:-.22em}