.treatment-icon {
  --chevron-art: url('/assets/ui/gold-up-chevron.png');
  position: relative; display: inline-block; width: 26px; height: 17px;
  flex: 0 0 auto; vertical-align: middle; line-height: 0;
  filter: drop-shadow(0 1px 1px #000a);
}
.treatment-icon.disadvantage { --chevron-art: url('/assets/ui/silver-down-chevron.png'); }
.treatment-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.treatment-icon::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, #ffffffb8 49%, #fff 50%, transparent 60%) -60px 0 / 60px 100% no-repeat;
  -webkit-mask: var(--chevron-art) center / contain no-repeat;
  mask: var(--chevron-art) center / contain no-repeat;
  animation: metallic-glint 4.8s ease-in-out infinite;
}
.treatment-icon.disadvantage::after { animation-delay: -2.4s; }
@keyframes metallic-glint { 0%, 65% { background-position: -60px 0; } 90%, 100% { background-position: 60px 0; } }
.treatment-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.playing .skill { position: relative; padding: 2px 3px 12px; grid-template-rows: minmax(0, 1fr) 14px; }
.playing .skill > .treatment-icon { position: absolute; right: 2px; width: 18px; height: 11px; pointer-events: none; }
.playing .skill > .treatment-icon.advantage { top: 2px; }
.playing .skill > .treatment-icon.disadvantage { bottom: 2px; }
.playing .roll-conditions .treatment-icon { width: 24px; height: 15px; margin-right: 2px; }
.encounter-treatments > div > .treatment-icon { margin-right: 3px; }
.effect-token b .treatment-icon { width: 18px; height: 12px; margin-right: 4px; }
@media (max-width: 410px) { .playing .roll-conditions .treatment-icon { width: 20px; height: 12px; } }
@media (prefers-reduced-motion: reduce) { .treatment-icon::after { animation: none; background: none; } }