.supporter-author {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.supporter-avatar {
  --avatar-bg: #F7DEC8;
  --avatar-ink: #B66B48;
  position: relative;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border: 1px solid rgba(217, 123, 74, 0.16);
  border-radius: 50%;
  background: var(--avatar-bg);
  box-shadow: 0 4px 12px rgba(92,61,46,0.08);
}

.supporter-avatar--tone-0 { --avatar-bg: #F8DDC8; --avatar-ink: #B96845; }
.supporter-avatar--tone-1 { --avatar-bg: #F6E3BB; --avatar-ink: #A97843; }
.supporter-avatar--tone-2 { --avatar-bg: #E8DDCF; --avatar-ink: #8A6855; }
.supporter-avatar--tone-3 { --avatar-bg: #F4D9D1; --avatar-ink: #A96359; }
.supporter-avatar--tone-4 { --avatar-bg: #E1E6D2; --avatar-ink: #75805A; }

.supporter-avatar-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  background: var(--avatar-ink);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  transform: translate(-50%, -50%);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

.supporter-avatar--cat .supporter-avatar-icon { mask-image: url('/public/icons/lucide-animals/cat.svg'); -webkit-mask-image: url('/public/icons/lucide-animals/cat.svg'); }
.supporter-avatar--dog .supporter-avatar-icon { mask-image: url('/public/icons/lucide-animals/dog.svg'); -webkit-mask-image: url('/public/icons/lucide-animals/dog.svg'); }
.supporter-avatar--rabbit .supporter-avatar-icon { mask-image: url('/public/icons/lucide-animals/rabbit.svg'); -webkit-mask-image: url('/public/icons/lucide-animals/rabbit.svg'); }
.supporter-avatar--bird .supporter-avatar-icon { mask-image: url('/public/icons/lucide-animals/bird.svg'); -webkit-mask-image: url('/public/icons/lucide-animals/bird.svg'); }
.supporter-avatar--fish .supporter-avatar-icon { mask-image: url('/public/icons/lucide-animals/fish.svg'); -webkit-mask-image: url('/public/icons/lucide-animals/fish.svg'); }
.supporter-avatar--turtle .supporter-avatar-icon { mask-image: url('/public/icons/lucide-animals/turtle.svg'); -webkit-mask-image: url('/public/icons/lucide-animals/turtle.svg'); }
.supporter-avatar--squirrel .supporter-avatar-icon { mask-image: url('/public/icons/lucide-animals/squirrel.svg'); -webkit-mask-image: url('/public/icons/lucide-animals/squirrel.svg'); }
.supporter-avatar--paw-print .supporter-avatar-icon { mask-image: url('/public/icons/lucide-animals/paw-print.svg'); -webkit-mask-image: url('/public/icons/lucide-animals/paw-print.svg'); }

.supporter-name {
  min-width: 0;
}

.supporter-date,
.supporter-youtube-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.supporter-history {
  margin-top: 12px;
  color: #8A6350;
  font-size: 12px;
}

.supporter-history summary {
  width: fit-content;
  color: #A94F25;
  cursor: pointer;
  font-weight: 700;
  list-style-position: inside;
}

.supporter-history summary:focus-visible {
  outline: 3px solid rgba(196,97,42,0.24);
  outline-offset: 3px;
  border-radius: 3px;
}

.supporter-history-list {
  display: grid;
  gap: 14px;
  margin-top: 12px;
}

.supporter-history-item {
  padding-top: 12px;
  border-top: 1px solid rgba(217,123,74,0.18);
}

.supporter-history-item .supporter-comment {
  margin-top: 0;
}

.supporter-calendar-icon {
  position: relative;
  flex: 0 0 14px;
  width: 14px;
  height: 13px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  opacity: 0.72;
}
.supporter-calendar-icon::before {
  position: absolute;
  top: 3px;
  left: 0;
  width: 100%;
  border-top: 1px solid currentColor;
  content: '';
}
.supporter-calendar-icon::after {
  position: absolute;
  top: -3px;
  left: 3px;
  width: 2px;
  height: 5px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 5px 0 0 currentColor;
  content: '';
}

.supporter-youtube-icon {
  position: relative;
  flex: 0 0 17px;
  width: 17px;
  height: 12px;
  border-radius: 4px;
  background: #D96C4A;
}
.supporter-youtube-icon::after {
  position: absolute;
  top: 3px;
  left: 7px;
  width: 0;
  height: 0;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 4px solid #fff;
  content: '';
}

.supporter-youtube-link {
  width: fit-content;
  transition: color 0.2s ease, transform 0.2s ease;
}

.supporter-thanks-area {
  width: 100%;
}

.supporter-announcement {
  display: flex;
  align-items: center;
  gap: 10px;
}

.supporter-thanks-icon {
  position: relative;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(145deg, #F6B46F, #E88C60);
  box-shadow: 0 5px 13px rgba(196,97,42,0.18);
}
.supporter-card--first .supporter-thanks-icon {
  background: linear-gradient(145deg, #F4A985, #DE7967);
}
.supporter-thanks-icon::before {
  position: absolute;
  top: 8.5px;
  left: 14px;
  width: 7px;
  height: 12px;
  border-radius: 7px 7px 0 0;
  background: #fff;
  content: '';
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
.supporter-thanks-icon::after {
  position: absolute;
  top: 8.5px;
  left: 7px;
  width: 7px;
  height: 12px;
  border-radius: 7px 7px 0 0;
  background: #fff;
  content: '';
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

.supporter-badge--first::before {
  margin-right: 5px;
  content: '✦';
  font-size: 9px;
}

@media (hover: hover) and (pointer: fine) {
  .supporter-youtube-link:hover {
    transform: translateX(1px);
  }
}

@media (min-width: 641px) {
  .supporter-name {
    white-space: nowrap;
  }
}

@media (max-width: 640px) {
  .supporter-avatar {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
  }

  .supporter-avatar-icon { width: 21px; height: 21px; }
}