/* =========================================
   応援ボタン(絵文字リアクション)ウィジェット
   探索者DB(cream/noir) ・ うちよそ(dark glass) 共通
   両テーマの変数名が違うため、フォールバックチェーンで
   どちらのページに置いても自然に馴染むようにしています。
   ========================================= */

.mame-support-reactions {
  --support-text-1: var(--text-1, var(--tg-text-1, rgba(20, 20, 20, 0.9)));
  --support-text-2: var(--text-2, var(--tg-text-2, rgba(20, 20, 20, 0.65)));
  --support-text-3: var(--text-3, var(--tg-text-3, rgba(20, 20, 20, 0.42)));
  --support-panel: var(--panel, var(--tg-panel, rgba(255, 255, 255, 0.7)));
  --support-line: var(--line-2, var(--tg-line-2, rgba(0, 0, 0, 0.08)));
  --support-line-strong: var(--line-1, var(--tg-line-1, rgba(0, 0, 0, 0.14)));
  --support-accent: var(--accent-safe, var(--tg-accent-fallback, #8ea2b8));

  margin: 28px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--support-line);
}

.mame-support-reactions__head {
  margin-bottom: 10px;
}

.mame-support-reactions__title {
  font-family: "Courier New", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--support-text-2);
}

.mame-support-reactions__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.mame-support-reaction-btn,
.mame-support-reaction-add,
.mame-support-reaction-pick {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--support-line-strong);
  background: var(--support-panel);
  color: var(--support-text-1);
  cursor: pointer;
  font: inherit;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.mame-support-reaction-btn:hover,
.mame-support-reaction-add:hover,
.mame-support-reaction-pick:hover {
  transform: translateY(-1px);
  border-color: var(--support-accent);
}

.mame-support-reaction-btn:active,
.mame-support-reaction-add:active,
.mame-support-reaction-pick:active {
  transform: scale(0.97);
}

.mame-support-reaction-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 13px;
  border-radius: 999px;
}

.mame-support-reaction-btn__emoji {
  font-size: 18px;
  line-height: 1;
}

.mame-support-reaction-btn__count {
  min-width: 1.1em;
  font-size: 12px;
  font-weight: 700;
  color: var(--support-text-3);
}

.mame-support-reaction-add {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  font-size: 19px;
  line-height: 1;
}

.mame-support-reaction-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding: 10px;
  border-radius: 14px;
  background: var(--support-panel);
  border: 1px solid var(--support-line);
}

.mame-support-reaction-picker[hidden] {
  display: none !important;
}

.mame-support-reaction-pick {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: 18px;
  line-height: 1;
}

.mame-support-reactions__note {
  margin-top: 10px;
  font-size: 11px;
  color: var(--support-text-3);
}

.mame-support-reaction-btn:disabled,
.mame-support-reaction-add:disabled,
.mame-support-reaction-pick:disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

@media (max-width: 768px) {
  .mame-support-reactions {
    margin-top: 22px;
    padding-top: 12px;
  }

  .mame-support-reaction-btn {
    min-height: 36px;
    padding: 0 11px;
  }

  .mame-support-reaction-btn__emoji {
    font-size: 16px;
  }

  .mame-support-reaction-add,
  .mame-support-reaction-pick {
    width: 36px;
    height: 36px;
    font-size: 17px;
  }
}