/* The wheel's list, prize and inventory share the same rarity colors. */
.ht-page :is(.ht-rarity, .ht-item:not(.ht-item-locked))[data-rarity="mythic"] {
  --ht-letter-color: #ffb6ab;
  --ht-letter-glow: #ff715b9e;
  --ht-letter-gradient: linear-gradient(105deg, #ff9c96 0%, #ffc3ae 26%, #ffeac7 44%, #ffbb95 54%, #ff9a93 72%);
  --ht-letter-speed: 4.9s;
}
.ht-page :is(.ht-rarity, .ht-item:not(.ht-item-locked))[data-rarity="iconic"] {
  --ht-letter-color: #a5fff2;
  --ht-letter-glow: #42e8eea8;
  --ht-letter-gradient: linear-gradient(106deg, #76eddc 0%, #aafdf8 25%, #f0ffff 42%, #8edeff 51%, #8affdc 73%);
  --ht-letter-speed: 4.05s;
}
.ht-page :is(.ht-rarity, .ht-item:not(.ht-item-locked))[data-rarity="eternal"] {
  --ht-letter-color: #ffe1a4;
  --ht-letter-glow: #ffbd5bb3;
  --ht-letter-gradient: linear-gradient(106deg, #ffce80 0%, #ffefb7 18%, #fff9e4 33%, #ffba6c 44%, #ffdbab 60%, #ffd28a 75%);
  --ht-letter-speed: 3.55s;
}
.ht-page :is(.ht-rarity, .ht-item:not(.ht-item-locked))[data-rarity="singularity"] {
  --ht-letter-color: #f3d4ff;
  --ht-letter-glow: #c08bffbf;
  --ht-letter-gradient: linear-gradient(106deg, #edbaff 0%, #c6b7ff 16%, #a7f5ff 27%, #fff3ff 39%, #ffafe7 49%, #d0adff 62%, #ffcef3 76%);
  --ht-letter-speed: 2.8s;
}

.ht-page .ht-rarity:is([data-rarity="mythic"], [data-rarity="iconic"], [data-rarity="eternal"], [data-rarity="singularity"]) {
  position: relative;
  display: inline-block;
  align-self: flex-start;
  max-inline-size: 100%;
  font-weight: 800;
  letter-spacing: .015em;
}
.ht-page :is(
  .ht-rarity:is([data-rarity="mythic"], [data-rarity="iconic"], [data-rarity="eternal"], [data-rarity="singularity"]),
  .ht-item:not(.ht-item-locked):is([data-rarity="mythic"], [data-rarity="iconic"], [data-rarity="eternal"], [data-rarity="singularity"]) > h3
) {
  color: var(--ht-letter-color);
  text-shadow: 0 0 8px var(--ht-letter-glow);
}

@supports (background-clip: text) {
  .ht-page :is(
    .ht-rarity:is([data-rarity="mythic"], [data-rarity="iconic"], [data-rarity="eternal"], [data-rarity="singularity"]),
    .ht-item:not(.ht-item-locked):is([data-rarity="mythic"], [data-rarity="iconic"], [data-rarity="eternal"], [data-rarity="singularity"]) > h3
  ) {
    background-image: var(--ht-letter-gradient);
    background-size: 220% 100%;
    background-position: 56% center;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 3px var(--ht-letter-glow));
  }
  .ht-page .ht-item:not(.ht-item-locked):is([data-rarity="mythic"], [data-rarity="iconic"], [data-rarity="eternal"], [data-rarity="singularity"]) > h3 {
    align-self: flex-start;
    max-inline-size: 100%;
  }
}

@media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  .ht-page .ht-odds { --ht-letter-delay: -.4s; }
  .ht-page .ht-item:nth-child(3n + 1) { --ht-letter-delay: -1.2s; }
  .ht-page .ht-item:nth-child(3n + 2) { --ht-letter-delay: -2.6s; }

  .ht-page :is(
    .ht-rarity:is([data-rarity="mythic"], [data-rarity="iconic"], [data-rarity="eternal"], [data-rarity="singularity"]),
    .ht-item:not(.ht-item-locked):is([data-rarity="mythic"], [data-rarity="iconic"], [data-rarity="eternal"], [data-rarity="singularity"]) > h3
  ) {
    animation: ht-letter-sheen var(--ht-letter-speed) ease-in-out var(--ht-letter-delay, 0s) infinite alternate;
  }

  .ht-page .ht-rarity:is([data-rarity="iconic"], [data-rarity="eternal"], [data-rarity="singularity"])::before,
  .ht-page .ht-rarity:is([data-rarity="eternal"], [data-rarity="singularity"])::after {
    content: "";
    position: absolute;
    pointer-events: none;
  }

  /* A narrow light trail follows the faceted highlights on Iconic and higher. */
  .ht-page .ht-rarity:is([data-rarity="iconic"], [data-rarity="eternal"], [data-rarity="singularity"])::before {
    inset: auto 0 1px;
    height: 1px;
    background: linear-gradient(90deg, transparent 27%, var(--ht-letter-glow) 44%, var(--ht-letter-color) 58%, transparent 78%);
    background-size: 220% 100%;
    background-repeat: no-repeat;
    animation: ht-letter-trail var(--ht-letter-speed) linear var(--ht-letter-delay, 0s) infinite;
  }

  /* Eternal gains a crown of warm glints. Singularity adds an iridescent orbit. */
  .ht-page .ht-rarity:is([data-rarity="eternal"], [data-rarity="singularity"])::after {
    inset: -4px 0;
    background:
      radial-gradient(ellipse at 12% 16%, #fff7d8 0 1px, transparent 1.9px),
      radial-gradient(ellipse at 58% 13%, #fff7d8 0 .8px, transparent 1.7px),
      radial-gradient(ellipse at 85% 80%, #ffe1a4 0 1px, transparent 1.9px);
    animation: ht-letter-glints 4.8s ease-in-out var(--ht-letter-delay, 0s) infinite;
  }
  .ht-page .ht-rarity[data-rarity="eternal"] {
    animation:
      ht-letter-sheen var(--ht-letter-speed) ease-in-out var(--ht-letter-delay, 0s) infinite alternate,
      ht-letter-corona 5.2s ease-in-out infinite;
  }
  .ht-page .ht-rarity[data-rarity="singularity"] {
    animation:
      ht-letter-sheen var(--ht-letter-speed) ease-in-out var(--ht-letter-delay, 0s) infinite alternate,
      ht-letter-aura 3.65s ease-in-out var(--ht-letter-delay, 0s) infinite;
  }
  .ht-page .ht-rarity[data-rarity="singularity"]::before {
    height: 2px;
    background-image: linear-gradient(90deg, transparent 20%, #9871ef77 35%, #91f1ffcc 48%, #ffe2ff 55%, #ff8adaaa 65%, transparent 81%);
    animation-direction: reverse;
  }
  .ht-page .ht-rarity[data-rarity="singularity"]::after {
    background:
      radial-gradient(ellipse at 7% 17%, #f6ddff 0 1px, transparent 1.9px),
      radial-gradient(ellipse at 26% 82%, #fc96e4 0 .9px, transparent 1.7px),
      radial-gradient(ellipse at 49% 10%, #a7f5ff 0 1px, transparent 2px),
      radial-gradient(ellipse at 74% 89%, #c9a5ff 0 1px, transparent 1.9px),
      radial-gradient(ellipse at 94% 24%, #fff2fd 0 1px, transparent 2px);
    animation:
      ht-letter-glints 3.2s ease-in-out var(--ht-letter-delay, 0s) infinite,
      ht-letter-orbit 5.1s ease-in-out infinite;
  }

  @keyframes ht-letter-sheen {
    from { background-position: 2% center; }
    to { background-position: 98% center; }
  }
  @keyframes ht-letter-trail {
    0% { background-position: 100% center; opacity: 0; }
    24%, 64% { opacity: .78; }
    100% { background-position: 0% center; opacity: 0; }
  }
  @keyframes ht-letter-glints {
    0%, 100% { opacity: .1; transform: translate(-2px, 1px); }
    48% { opacity: .94; transform: translate(1px, -2px); }
  }
  @keyframes ht-letter-corona {
    0%, 100% { filter: drop-shadow(0 0 3px #ffbd5bb3); }
    50% { filter: drop-shadow(0 0 5px #ffb857d0) drop-shadow(0 0 2px #fff2c483); }
  }
  @keyframes ht-letter-orbit {
    0%, 100% { rotate: -2deg; }
    50% { rotate: 3deg; }
  }
  @keyframes ht-letter-aura {
    0%, 100% { filter: drop-shadow(0 0 3px #c08bffbf); }
    47% { filter: drop-shadow(0 0 5px #9cb7ff9e) drop-shadow(0 0 3px #ff8ada83); }
  }
}

@media (forced-colors: active) {
  .ht-page :is(
    .ht-rarity:is([data-rarity="mythic"], [data-rarity="iconic"], [data-rarity="eternal"], [data-rarity="singularity"]),
    .ht-item:not(.ht-item-locked):is([data-rarity="mythic"], [data-rarity="iconic"], [data-rarity="eternal"], [data-rarity="singularity"]) > h3
  ) {
    color: CanvasText;
    background: none;
    text-shadow: none;
    filter: none;
  }
}