/* 游戏页英雄区的「订阅」「收藏」（Tagsmod_Game_Actions）。
   - 用户自己的操作排在参与共建条前面，同一行；放不下时共建条整体换到下一行，两组之间留得比组内宽。
   - 订阅：未订阅是主按钮（--zb-primary 实底）；已订阅是次要按钮（--zb-muted 底加 --zb-chip-border 细边框，同主题收藏页
     「按钮看得出能点」的写法），图标从 bell-plus 换成 bell-ring（--zb-link），订阅成功时铃铛摇一下。
   - 收藏是主题的 .zb-fav-save（zb_favorites_render_save_button()），尺寸与这里一致：36px、控件圆角，触屏 44px。
   - 手机上两个按钮等分一行。只用 --zb-* 令牌。 */

.zbui .tagsmod-hero-actionbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zb-space-xs) var(--zb-space-md);
  margin-top: var(--zb-space-md);
}
.zbui .tagsmod-hero-actionbar .tagsmod-contrib-bar {
  margin-top: 0;
}
.zbui .tagsmod-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zb-space-xs);
}
.zbui .tagsmod-subscribe {
  position: relative;
  display: inline-flex;
}

.zbui .tagsmod-subscribe__button {
  display: inline-flex;
  min-height: var(--zb-control-h-sm);
  align-items: center;
  justify-content: center;
  gap: var(--zb-space-xs);
  border: 1px solid transparent;
  border-radius: var(--zb-radius-sm);
  background: var(--zb-primary);
  box-shadow: var(--zb-shadow-action);
  color: var(--zb-on-primary);
  cursor: pointer;
  font-size: var(--zb-text-base);
  font-weight: var(--zb-weight-medium);
  line-height: var(--zb-leading-tight);
  padding: 0 var(--zb-space-md);
  white-space: nowrap;
  transition: background-color var(--zb-duration-fast) var(--zb-ease), border-color var(--zb-duration-fast) var(--zb-ease),
    color var(--zb-duration-fast) var(--zb-ease);
}
.zbui .tagsmod-subscribe__button:hover {
  background: var(--zb-primary-hover);
}
.zbui .tagsmod-subscribe__button[data-subscribed="1"] {
  border-color: var(--zb-chip-border);
  background: var(--zb-muted);
  box-shadow: none;
  color: var(--zb-text);
}
.zbui .tagsmod-subscribe__button[data-subscribed="1"]:hover {
  border-color: var(--zb-primary-soft-border-strong);
  background: var(--zb-muted);
}
.zbui .tagsmod-subscribe__button:focus-visible {
  outline: none;
  box-shadow: var(--zb-focus-ring);
}
.zbui .tagsmod-subscribe__button[aria-busy="true"] {
  cursor: progress;
}
.zbui .tagsmod-subscribe__icon {
  width: var(--zb-icon-lg);
  height: var(--zb-icon-lg);
  flex: none;
}
.zbui .tagsmod-subscribe__icon--on {
  color: var(--zb-link);
  transform-origin: 50% 12%;
}
.tagsmod-subscribe__button[data-subscribed="1"] .tagsmod-subscribe__icon--off,
.tagsmod-subscribe__button[data-subscribed="0"] .tagsmod-subscribe__icon--on {
  display: none;
}
/* 读屏的播报区：没有主题提示时用。 */
.zbui .tagsmod-subscribe__live {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (any-pointer: coarse) {
  .zbui .tagsmod-subscribe__button {
    min-height: var(--zb-control-h);
  }
}

/* 手机：等宽的列（grid 的 1fr 不把各自的内边距算进分配，flex: 1 1 0 会让带内边距的收藏按钮宽出一截）。 */
@media (max-width: 575.98px) {
  .zbui .tagsmod-hero-actions {
    display: grid;
    width: 100%;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
  }
  .zbui .tagsmod-subscribe__button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .tagsmod-subscribe__button.is-ringing .tagsmod-subscribe__icon--on {
    animation: tagsmod-bell-ring 0.6s var(--zb-ease) both;
  }
}
@keyframes tagsmod-bell-ring {
  0%,
  100% {
    transform: rotate(0);
  }
  20% {
    transform: rotate(14deg);
  }
  40% {
    transform: rotate(-12deg);
  }
  60% {
    transform: rotate(8deg);
  }
  80% {
    transform: rotate(-4deg);
  }
}

@media (forced-colors: active) {
  .zbui .tagsmod-subscribe__button {
    border-color: ButtonText;
  }
}