/* Small faire trinkets. Decorative only, hung or tucked clear of text. */
.trinket{
  position:absolute;
  height:auto;
  pointer-events:none;
  user-select:none;
  z-index:6;
  filter:drop-shadow(-4px 5px 4px rgba(40,40,40,.35));
}
.trinket-hang{
  top:calc(100% - 2px);
  left:16px;
  z-index:3;
  width:48px;
  transform-origin:50% 0;
  animation:banner-sun-sway 6.2s ease-in-out infinite;
}
.trinket-crystal{width:50px}
.trinket-dragon{width:54px;left:22px}
.trinket-scroll{width:46px}
.trinket-potion{width:40px;left:20px}
.hbox > img.trinket.trinket-d20{
  position:absolute;
  z-index:6;
  top:12px;
  left:50%;
  right:auto;
  width:36px;
  height:auto;
  margin-left:-18px;
}
.trinket-key{
  top:22px;
  left:-12px;
  width:46px;
  transform:rotate(-14deg);
  z-index:5;
}
.crest-slot{position:relative;display:block;width:fit-content;margin:0 auto}
.intro .crest-slot img.trinket-quill{
  position:absolute;
  width:34px;
  height:auto;
  right:-2px;
  bottom:12px;
  margin:0;
  transform:rotate(18deg);
  filter:drop-shadow(-3px 4px 3px rgba(40,40,40,.35));
}
html.is-embed .trinket{display:none !important}
@media (max-width:720px){
  .trinket-hang{width:32px;left:6px}
  .trinket-crystal{width:34px}
  .trinket-dragon{width:36px;left:8px}
  .trinket-potion{width:28px}
  .trinket-scroll{width:32px}
  .hbox > img.trinket.trinket-d20{width:28px;margin-left:-14px;top:8px}
  .trinket-key{width:32px;left:-2px;top:10px}
  .intro .crest-slot img.trinket-quill{width:26px;right:0;bottom:8px}
}
@media (prefers-reduced-motion:reduce){
  .trinket-hang{animation:none}
}