/* 聊天表情（原作 30 个猫脸，docs/MEISHI_TD_ROOMLIST_EMOTE.md §2.3.5）。生成：research/meishi_td/tools/ui_screens/faces.py，不要手改。
   图集地址由 web/app/social/faces.js 在 :root 上设 --face-atlas（element.style，不写内联 <style>）；
   .sc-anim 才动（IntersectionObserver 只给看得见的加），页面切后台时 <html> 加 .sc-faces-hidden 整页暂停。 */
.sc-face { display: inline-block; width: 34px; height: 34px; vertical-align: middle; flex: none;
  background-image: var(--face-atlas, none); background-repeat: no-repeat; background-size: 544px 306px; }
.sc-face.sc-anim { animation-timing-function: step-end; animation-iteration-count: infinite; }
html.sc-faces-hidden .sc-face.sc-anim { animation-play-state: paused; }
.sc-f-buhaoyisi { background-position: 0px 0px; }
.sc-face.sc-anim.sc-f-buhaoyisi { animation-name: sc-fk-buhaoyisi; animation-duration: 1000ms; }
@keyframes sc-fk-buhaoyisi { 0% { background-position: 0px 0px; } 50% { background-position: -34px 0px; } 100% { background-position: 0px 0px; } }
.sc-f-chan { background-position: -68px 0px; }
.sc-face.sc-anim.sc-f-chan { animation-name: sc-fk-chan; animation-duration: 1900ms; }
@keyframes sc-fk-chan { 0% { background-position: -68px 0px; } 52.632% { background-position: -102px 0px; } 78.947% { background-position: -136px 0px; } 84.211% { background-position: -170px 0px; } 89.474% { background-position: -204px 0px; } 100% { background-position: -68px 0px; } }
.sc-f-dayun { background-position: -238px 0px; }
.sc-face.sc-anim.sc-f-dayun { animation-name: sc-fk-dayun; animation-duration: 2900ms; }
@keyframes sc-fk-dayun { 0% { background-position: -238px 0px; } 17.241% { background-position: -272px 0px; } 24.138% { background-position: -238px 0px; } 41.379% { background-position: -306px 0px; } 48.276% { background-position: -340px 0px; } 55.172% { background-position: -374px 0px; } 62.069% { background-position: -408px 0px; } 68.966% { background-position: -442px 0px; } 75.862% { background-position: -476px 0px; } 82.759% { background-position: -510px 0px; } 100% { background-position: -238px 0px; } }
.sc-f-dahou { background-position: 0px -34px; }
.sc-face.sc-anim.sc-f-dahou { animation-name: sc-fk-dahou; animation-duration: 1700ms; }
@keyframes sc-fk-dahou { 0% { background-position: 0px -34px; } 29.412% { background-position: -34px -34px; } 41.176% { background-position: -68px -34px; } 100% { background-position: 0px -34px; } }
.sc-f-daku { background-position: -102px -34px; }
.sc-face.sc-anim.sc-f-daku { animation-name: sc-fk-daku; animation-duration: 1400ms; }
@keyframes sc-fk-daku { 0% { background-position: -102px -34px; } 14.286% { background-position: -136px -34px; } 21.429% { background-position: -170px -34px; } 28.571% { background-position: -204px -34px; } 64.286% { background-position: -238px -34px; } 100% { background-position: -102px -34px; } }
.sc-f-daxiao { background-position: -272px -34px; }
.sc-face.sc-anim.sc-f-daxiao { animation-name: sc-fk-daxiao; animation-duration: 1800ms; }
@keyframes sc-fk-daxiao { 0% { background-position: -272px -34px; } 27.778% { background-position: -306px -34px; } 55.556% { background-position: -340px -34px; } 66.667% { background-position: -306px -34px; } 77.778% { background-position: -340px -34px; } 88.889% { background-position: -306px -34px; } 100% { background-position: -272px -34px; } }
.sc-f-fahuo { background-position: -374px -34px; }
.sc-face.sc-anim.sc-f-fahuo { animation-name: sc-fk-fahuo; animation-duration: 2400ms; }
@keyframes sc-fk-fahuo { 0% { background-position: -374px -34px; } 41.667% { background-position: -408px -34px; } 50% { background-position: -442px -34px; } 58.333% { background-position: -476px -34px; } 100% { background-position: -374px -34px; } }
.sc-f-huhu { background-position: -510px -34px; }
.sc-face.sc-anim.sc-f-huhu { animation-name: sc-fk-huhu; animation-duration: 2500ms; }
@keyframes sc-fk-huhu { 0% { background-position: -510px -34px; } 20% { background-position: 0px -68px; } 40% { background-position: -34px -68px; } 60% { background-position: 0px -68px; } 100% { background-position: -510px -34px; } }
.sc-f-jingyi { background-position: -68px -68px; }
.sc-face.sc-anim.sc-f-jingyi { animation-name: sc-fk-jingyi; animation-duration: 1800ms; }
@keyframes sc-fk-jingyi { 0% { background-position: -68px -68px; } 27.778% { background-position: -102px -68px; } 55.556% { background-position: -136px -68px; } 61.111% { background-position: -170px -68px; } 72.222% { background-position: -136px -68px; } 100% { background-position: -68px -68px; } }
.sc-f-jiongjiong { background-position: -204px -68px; }
.sc-face.sc-anim.sc-f-jiongjiong { animation-name: sc-fk-jiongjiong; animation-duration: 2000ms; }
@keyframes sc-fk-jiongjiong { 0% { background-position: -204px -68px; } 25% { background-position: -238px -68px; } 50% { background-position: -272px -68px; } 75% { background-position: -204px -68px; } 100% { background-position: -204px -68px; } }
.sc-f-jukun { background-position: -306px -68px; }
.sc-face.sc-anim.sc-f-jukun { animation-name: sc-fk-jukun; animation-duration: 4000ms; }
@keyframes sc-fk-jukun { 0% { background-position: -306px -68px; } 12.5% { background-position: -340px -68px; } 25% { background-position: -374px -68px; } 50% { background-position: -408px -68px; } 100% { background-position: -306px -68px; } }
.sc-f-kaixin { background-position: -442px -68px; }
.sc-face.sc-anim.sc-f-kaixin { animation-name: sc-fk-kaixin; animation-duration: 1900ms; }
@keyframes sc-fk-kaixin { 0% { background-position: -442px -68px; } 52.632% { background-position: -476px -68px; } 63.158% { background-position: -510px -68px; } 73.684% { background-position: 0px -102px; } 100% { background-position: -442px -68px; } }
.sc-f-laohu { background-position: -34px -102px; }
.sc-face.sc-anim.sc-f-laohu { animation-name: sc-fk-laohu; animation-duration: 3500ms; }
@keyframes sc-fk-laohu { 0% { background-position: -34px -102px; } 14.286% { background-position: -68px -102px; } 20% { background-position: -102px -102px; } 25.714% { background-position: -136px -102px; } 31.429% { background-position: -170px -102px; } 37.143% { background-position: -204px -102px; } 51.429% { background-position: -238px -102px; } 57.143% { background-position: -272px -102px; } 100% { background-position: -34px -102px; } }
.sc-f-laoshu { background-position: -306px -102px; }
.sc-face.sc-anim.sc-f-laoshu { animation-name: sc-fk-laoshu; animation-duration: 3900ms; }
@keyframes sc-fk-laoshu { 0% { background-position: -306px -102px; } 12.821% { background-position: -340px -102px; } 17.949% { background-position: -374px -102px; } 23.077% { background-position: -306px -102px; } 35.897% { background-position: -408px -102px; } 38.462% { background-position: -442px -102px; } 43.59% { background-position: -476px -102px; } 46.154% { background-position: -510px -102px; } 71.795% { background-position: 0px -136px; } 97.436% { background-position: -306px -102px; } 100% { background-position: -306px -102px; } }
.sc-f-lianhong { background-position: -34px -136px; }
.sc-face.sc-anim.sc-f-lianhong { animation-name: sc-fk-lianhong; animation-duration: 2900ms; }
@keyframes sc-fk-lianhong { 0% { background-position: -34px -136px; } 17.241% { background-position: -68px -136px; } 24.138% { background-position: -102px -136px; } 31.034% { background-position: -136px -136px; } 48.276% { background-position: -102px -136px; } 65.517% { background-position: -136px -136px; } 100% { background-position: -34px -136px; } }
.sc-f-liukoushui { background-position: -170px -136px; }
.sc-face.sc-anim.sc-f-liukoushui { animation-name: sc-fk-liukoushui; animation-duration: 2800ms; }
@keyframes sc-fk-liukoushui { 0% { background-position: -170px -136px; } 17.857% { background-position: -204px -136px; } 21.429% { background-position: -238px -136px; } 28.571% { background-position: -272px -136px; } 46.429% { background-position: -306px -136px; } 64.286% { background-position: -340px -136px; } 82.143% { background-position: -374px -136px; } 89.286% { background-position: -408px -136px; } 92.857% { background-position: -204px -136px; } 100% { background-position: -170px -136px; } }
.sc-f-meinv { background-position: -442px -136px; }
.sc-face.sc-anim.sc-f-meinv { animation-name: sc-fk-meinv; animation-duration: 1900ms; }
@keyframes sc-fk-meinv { 0% { background-position: -442px -136px; } 26.316% { background-position: -476px -136px; } 36.842% { background-position: -510px -136px; } 47.368% { background-position: -476px -136px; } 100% { background-position: -442px -136px; } }
.sc-f-nihuai { background-position: 0px -170px; }
.sc-face.sc-anim.sc-f-nihuai { animation-name: sc-fk-nihuai; animation-duration: 3000ms; }
@keyframes sc-fk-nihuai { 0% { background-position: 0px -170px; } 33.333% { background-position: -34px -170px; } 100% { background-position: 0px -170px; } }
.sc-f-outu { background-position: -68px -170px; }
.sc-face.sc-anim.sc-f-outu { animation-name: sc-fk-outu; animation-duration: 2100ms; }
@keyframes sc-fk-outu { 0% { background-position: -68px -170px; } 23.81% { background-position: -102px -170px; } 33.333% { background-position: -136px -170px; } 57.143% { background-position: -170px -170px; } 80.952% { background-position: -204px -170px; } 90.476% { background-position: -170px -170px; } 95.238% { background-position: -238px -170px; } 100% { background-position: -68px -170px; } }
.sc-f-paomeiyan { background-position: -272px -170px; }
.sc-face.sc-anim.sc-f-paomeiyan { animation-name: sc-fk-paomeiyan; animation-duration: 1500ms; }
@keyframes sc-fk-paomeiyan { 0% { background-position: -272px -170px; } 33.333% { background-position: -306px -170px; } 100% { background-position: -272px -170px; } }
.sc-f-qinqin { background-position: -340px -170px; }
.sc-face.sc-anim.sc-f-qinqin { animation-name: sc-fk-qinqin; animation-duration: 1400ms; }
@keyframes sc-fk-qinqin { 0% { background-position: -340px -170px; } 35.714% { background-position: -374px -170px; } 50% { background-position: -408px -170px; } 85.714% { background-position: -442px -170px; } 100% { background-position: -340px -170px; } }
.sc-f-shuai { background-position: -476px -170px; }
.sc-face.sc-anim.sc-f-shuai { animation-name: sc-fk-shuai; animation-duration: 3200ms; }
@keyframes sc-fk-shuai { 0% { background-position: -476px -170px; } 31.25% { background-position: -510px -170px; } 62.5% { background-position: 0px -204px; } 68.75% { background-position: -510px -170px; } 84.375% { background-position: -34px -204px; } 100% { background-position: -476px -170px; } }
.sc-f-tanqi { background-position: -68px -204px; }
.sc-face.sc-anim.sc-f-tanqi { animation-name: sc-fk-tanqi; animation-duration: 3400ms; }
@keyframes sc-fk-tanqi { 0% { background-position: -68px -204px; } 29.412% { background-position: -102px -204px; } 35.294% { background-position: -136px -204px; } 38.235% { background-position: -170px -204px; } 41.176% { background-position: -204px -204px; } 100% { background-position: -68px -204px; } }
.sc-f-tiaopi { background-position: -238px -204px; }
.sc-face.sc-anim.sc-f-tiaopi { animation-name: sc-fk-tiaopi; animation-duration: 2800ms; }
@keyframes sc-fk-tiaopi { 0% { background-position: -238px -204px; } 71.429% { background-position: -272px -204px; } 78.571% { background-position: -306px -204px; } 82.143% { background-position: -272px -204px; } 89.286% { background-position: -306px -204px; } 92.857% { background-position: -272px -204px; } 100% { background-position: -238px -204px; } }
.sc-f-xihuan { background-position: -340px -204px; }
.sc-face.sc-anim.sc-f-xihuan { animation-name: sc-fk-xihuan; animation-duration: 1200ms; }
@keyframes sc-fk-xihuan { 0% { background-position: -340px -204px; } 16.667% { background-position: -374px -204px; } 33.333% { background-position: -408px -204px; } 50% { background-position: -442px -204px; } 66.667% { background-position: -408px -204px; } 83.333% { background-position: -374px -204px; } 100% { background-position: -340px -204px; } }
.sc-f-xiukui { background-position: -476px -204px; }
.sc-face.sc-anim.sc-f-xiukui { animation-name: sc-fk-xiukui; animation-duration: 3100ms; }
@keyframes sc-fk-xiukui { 0% { background-position: -476px -204px; } 16.129% { background-position: -510px -204px; } 22.581% { background-position: 0px -238px; } 29.032% { background-position: -34px -238px; } 61.29% { background-position: 0px -238px; } 67.742% { background-position: -34px -238px; } 100% { background-position: -476px -204px; } }
.sc-f-xuanyun { background-position: -68px -238px; }
.sc-face.sc-anim.sc-f-xuanyun { animation-name: sc-fk-xuanyun; animation-duration: 900ms; }
@keyframes sc-fk-xuanyun { 0% { background-position: -68px -238px; } 22.222% { background-position: -102px -238px; } 44.444% { background-position: -136px -238px; } 66.667% { background-position: -170px -238px; } 88.889% { background-position: -204px -238px; } 100% { background-position: -68px -238px; } }
.sc-f-zhongdu { background-position: -238px -238px; }
.sc-face.sc-anim.sc-f-zhongdu { animation-name: sc-fk-zhongdu; animation-duration: 2000ms; }
@keyframes sc-fk-zhongdu { 0% { background-position: -238px -238px; } 10% { background-position: -272px -238px; } 20% { background-position: -306px -238px; } 30% { background-position: -340px -238px; } 35% { background-position: -374px -238px; } 40% { background-position: -408px -238px; } 50% { background-position: -374px -238px; } 100% { background-position: -238px -238px; } }
.sc-f-zhuakuang { background-position: -442px -238px; }
.sc-face.sc-anim.sc-f-zhuakuang { animation-name: sc-fk-zhuakuang; animation-duration: 600ms; }
@keyframes sc-fk-zhuakuang { 0% { background-position: -442px -238px; } 33.333% { background-position: -476px -238px; } 50% { background-position: -510px -238px; } 66.667% { background-position: 0px -272px; } 83.333% { background-position: -34px -272px; } 100% { background-position: -442px -238px; } }
.sc-f-zhuantou { background-position: -68px -272px; }
.sc-face.sc-anim.sc-f-zhuantou { animation-name: sc-fk-zhuantou; animation-duration: 2300ms; }
@keyframes sc-fk-zhuantou { 0% { background-position: -68px -272px; } 21.739% { background-position: -102px -272px; } 30.435% { background-position: -136px -272px; } 34.783% { background-position: -170px -272px; } 39.13% { background-position: -204px -272px; } 60.87% { background-position: -238px -272px; } 65.217% { background-position: -272px -272px; } 73.913% { background-position: -306px -272px; } 78.261% { background-position: -68px -272px; } 100% { background-position: -68px -272px; } }