/* ============================================================
   粤掂 JyutDim · 角色头像（醒獅仔）
   —— 游戏页标题旁的小头像，以及内页刊头那一枚。
   —— 用 <span class="mascot-ico"> 而不是 <img>：背景走 CSS，
      简繁切换直接换图（额头牌匾上写着「粵/粤」）。
   —— 图是 assets/mascot/lion-head.png / lion-head-sc.png
      （从整身图 lion-hero.png 裁的 270×270 方图，透明底，头已居中）。
   —— 只放这一个组件，页面里不要再各写一份。
   ============================================================ */

.mascot-ico{
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  vertical-align: -0.24em;
  margin-right: .14em;
  /* 头图本身就是正方形、头已居中，圆角只削掉四角 */
  background: #f6efe2 url("mascot/lion-head.png") center / 100% 100% no-repeat;
  box-shadow: 0 0 0 1px rgba(0,74,39,.16);
  /* 别被标题的 letter-spacing 拉开 */
  letter-spacing: 0;
}

/* 简体：换成牌匾写「粤」的那张 */
html[data-charmode="sc"] .mascot-ico{
  background-image: url("mascot/lion-head-sc.png");
}

/* 闯关顶栏里的那一枚更小，跟着 17px 的标题走 */
.topbar .mascot-ico{
  width: 1.35em;
  height: 1.35em;
  margin-right: .34em;
  flex: 0 0 auto;
  vertical-align: middle;
}

@media (prefers-reduced-motion: no-preference){
  /* 头像轻轻「呼吸」，和其他页面的吉祥物同一个节奏 */
  .mascot-ico{ animation: mascotIcoBob 5.6s ease-in-out infinite; }
  @keyframes mascotIcoBob{
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(-1.5px); }
  }
}