#hnrp-highteam-link[hidden], .ht-page [hidden] { display: none !important; }
.ht-page {
  --ht-bg: #08192f;
  --ht-panel: #0d223b;
  --ht-border: #285070;
  --ht-text: #eef7ff;
  --ht-muted: #aec9e4;
  color: var(--ht-text);
  background: radial-gradient(ellipse at 55% 0%, #173d60 0%, var(--ht-bg) 49%);
  min-height: 60vh;
  padding: clamp(28px, 6vw, 76px) 0;
  font: 400 15px/1.5 "Inter", system-ui, sans-serif;
}
.ht-wrap { width: min(1120px, calc(100% - 28px)); margin-inline: auto; }
.ht-head { margin-bottom: 26px; }
.ht-head h1 { font-size: clamp(33px, 6vw, 64px); letter-spacing: -.05em; line-height: 1; margin: 0 0 12px; }
.ht-head p, .ht-note, .ht-panel-head p { color: var(--ht-muted); margin: 0; }
.ht-status { margin: 0 0 15px; min-height: 1.5em; }
.ht-status:empty { display: none; }
.ht-status[data-error="1"] { color: #ffb5bd; }
.ht-grid { display: grid; grid-template-columns: minmax(0, 1.38fr) minmax(260px, 1fr); gap: 16px; }
.ht-panel {
  min-width: 0;
  border: 1px solid var(--ht-border);
  border-radius: 18px;
  padding: clamp(13px, 3vw, 25px);
  background: linear-gradient(165deg, #112d4b, var(--ht-panel) 55%);
}
.ht-panel-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; }
.ht-panel h2, .ht-panel h3 { line-height: 1.22; margin: 0 0 8px; }
.ht-panel h2 { font-size: 23px; }
.ht-wheel-panel { text-align: center; }
.ht-wheel-wrap { position: relative; width: min(100% - 12px, 360px); margin: 16px auto 14px; }
.ht-wheel-wrap canvas { width: 100%; aspect-ratio: 1; display: block; border-radius: 50%; box-shadow: 0 8px 34px #040915b3; }
.ht-pointer {
  position: absolute; left: 50%; top: -5px; transform: translateX(-50%);
  width: 22px; height: 27px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: #f7df9c;
}
.ht-button, .ht-controls select {
  color: #eff8ff; background: #153550; border: 1px solid #396485; border-radius: 9px;
  padding: 8px 12px; min-height: 44px; font: 700 14px/1.2 system-ui, sans-serif;
}
.ht-button { cursor: pointer; }
.ht-button:hover { border-color: #8ccfff; background: #1c4669; }
.ht-button:disabled { opacity: .62; cursor: default; }
.ht-button:focus-visible, .ht-controls select:focus-visible { outline: 2px solid #a6deff; outline-offset: 3px; }
.ht-primary { background: #1b527c; border-color: #62a9d0; }
#ht-spin { min-width: min(100%, 190px); margin-bottom: 10px; }
.ht-note { font-size: 13px; }
.ht-odds { margin: 5px 0 16px; }
.ht-odds > div {
  display: flex; justify-content: space-between; gap: 6px;
  padding: 7px 0; border-bottom: 1px solid #28435e;
}
.ht-odds dd { margin: 0; font-variant-numeric: tabular-nums; }
.ht-singularity-note {
  display: block;
  margin-top: 4px;
  color: var(--ht-muted);
  font-size: 12px;
  line-height: 1.35;
}
.ht-rarity { font-weight: 740; color: #b4c8de; }
.ht-rarity[data-rarity="uncommon"] { color: #80e0bd; }
.ht-rarity[data-rarity="rare"] { color: #83cdff; }
.ht-rarity[data-rarity="ultra"] { color: #ddbbff; }
.ht-rarity[data-rarity="epic"] { color: #ffa9e4; }
.ht-rarity[data-rarity="legendary"] { color: #ffda98; }
.ht-rarity[data-rarity="mythic"] { color: #ffb1aa; }
.ht-rarity[data-rarity="iconic"] { color: #a5fff2; text-shadow: 0 0 13px #4ce8dc65; }
.ht-rarity[data-rarity="eternal"] { color: #ffe1a4; text-shadow: 0 0 14px #ff96e97a; }
.ht-rarity[data-rarity="singularity"] { color: #f4d2ff; text-shadow: 0 0 12px #ba70ff9a; }
.ht-showcase[data-rarity="eternal"][data-kind="background"] {
  background: radial-gradient(ellipse at 50% 42%, #332944, #111529 76%);
  border-color: #80649b;
}
.ht-wish-form, .ht-wish-form label { display: grid; gap: 8px; }
.ht-wish-form, .ht-result > button { margin-block: 8px; }
.ht-wish-form textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  padding: 10px;
  border: 1px solid #496e9e;
  border-radius: 8px;
  background: #09192e;
  color: #eef7ff;
  font: inherit;
}
.ht-wish-entry { padding: 12px 0; border-bottom: 1px solid #294966; overflow-wrap: anywhere; }
.ht-wish-entry small { display: block; color: var(--ht-muted); }
.ht-wish-entry p { margin-bottom: 0; white-space: pre-wrap; }
.ht-wish-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 8px 18px; }
.ht-wish-delete { color: #ffe2e8; border-color: #88455b; background: #382336; min-height: 38px; }
.ht-wish-delete:hover { background: #592b44; border-color: #d97f95; }
.ht-profile, .v22-member.ht-profile-custom, .team-grid .team-profile.ht-profile-custom {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
}
.ht-profile { background: #0b1d36; border: 1px solid #2b4d6a; border-radius: 12px; padding: 13px 8px 8px; }
.ht-preview-avatar { width: 85px; height: 85px; position: relative; background: #244461; border-radius: 100%; display: grid; place-items: center; }
.ht-preview-avatar > #ht-avatar-fallback { font-size: 31px; color: #c9eaff; }
.ht-profile[data-ht-frame] { padding-top: 22px; }
.ht-preview-avatar > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.ht-profile-ring { display: none; pointer-events: none; }
:where(.ht-profile, .ht-profile-custom)[data-ht-frame] .ht-profile-ring {
  display: block; position: absolute; inset: -33.33%;
  background: var(--ht-frame) center / contain no-repeat;
  z-index: 2;
}
.ht-profile-custom[data-ht-frame] :is(.team-avatar, .v22-member-avatar) { position: relative; overflow: visible; border-radius: 50%; }
.ht-profile-custom[data-ht-frame] :is(.team-avatar, .v22-member-avatar) > img { border-radius: 50%; }
.ht-profile-custom[data-ht-frame] .hnrp-frame-stage :is(.hnrp-frame-layer, .hnrp-frame-fluss) { visibility: hidden; }
.ht-profile-custom[data-ht-frame] .hnrp-frame-stage { aspect-ratio: 1000 / 470; }
.ht-profile-custom[data-ht-frame] .hnrp-frame-stage :is(.team-avatar, .v22-member-avatar) { position: absolute; width: 38%; }
.v22-member.ht-profile-custom .v22-member-name, .team-grid .team-profile.ht-profile-custom strong {
  text-shadow: 0 1px 6px #02081a, 0 2px 13px #02081a;
  overflow-wrap: anywhere;
}
.ht-result { margin-top: 12px; padding: 12px; border: 1px solid #467699; border-radius: 12px; background: #0b1c35; overflow-wrap: anywhere; }
.ht-result img { width: 105px; height: 72px; object-fit: contain; display: block; margin: 0 auto 6px; }
.ht-result p { margin: 0 0 8px; }
.ht-inventory { margin-top: 16px; }
.ht-controls { display: flex; flex-wrap: wrap; gap: 9px; margin: 8px 0 11px; }
.ht-controls label { display: grid; gap: 4px; color: var(--ht-muted); }
.ht-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); gap: 10px; margin-top: 13px; }
.ht-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; background: #0b1e34; border: 1px solid #284662; border-radius: 11px; padding: 10px; overflow-wrap: anywhere; }
.ht-item h3, .ht-item p { margin: 0; }
.ht-item h3 { font-size: 15px; }
.ht-item p { color: var(--ht-muted); font-size: 12px; }
.ht-item img { width: 100%; height: 82px; object-fit: contain; }
.ht-item .ht-button { margin-top: auto; }
.ht-item[data-equipped="1"] { border-color: #64aee0; }
@media (max-width: 720px) {
  .ht-grid { grid-template-columns: minmax(0, 1fr); }
  .ht-wheel-wrap { width: min(100% - 10px, 310px); }
}
html[data-hnrp-mobile] .ht-grid { grid-template-columns: minmax(0, 1fr); }
html[data-hnrp-mobile] .ht-controls select { font-size: 16px; }

/* The same collectible frame is used in the catalogue, result, preview and roster. */
.ht-profile[data-ht-background], .v22-member[data-ht-background], .team-grid .team-profile[data-ht-background] {
  background-image: var(--ht-background-motion, linear-gradient(transparent, transparent)), var(--ht-background) !important;
  background-size: var(--ht-background-motion-size, 100% 100%), cover !important;
  background-repeat: no-repeat !important;
  background-origin: border-box !important;
  background-clip: border-box !important;
  background-position: center;
  background-color: #091428 !important;
  border-color: color-mix(in srgb, var(--ht-background-accent) 65%, #182942) !important;
}
.ht-profile[data-ht-frame] { padding-block-start: 46px; }
:where(.ht-profile, .ht-profile-custom, .ht-showcase)[data-ht-frame] .ht-profile-ring {
  display: block;
  position: absolute;
  inset: auto;
  left: 50%;
  top: 50%;
  width: 338%;
  aspect-ratio: 1000 / 680;
  transform: translate(-50%,-50%);
  background: var(--ht-frame) center / 100% 100% no-repeat;
  pointer-events: none;
}
.ht-profile-custom[data-ht-frame] {
  --ht-avatar-size: min(29cqi, 88px);
  container-type: inline-size;
  display: flex;
  gap: 15px;
  min-height: 270px;
  padding: 37px 13px 16px;
}
.ht-profile-custom[data-ht-frame] :is(.team-avatar, .v22-member-avatar) {
  width: var(--ht-avatar-size);
  height: var(--ht-avatar-size);
  aspect-ratio: 1;
  margin: 20px 0 23px;
  box-shadow: 0 10px 25px #02061188;
  border: 0;
}
.ht-profile-custom[data-ht-frame] .hnrp-frame-stage {
  aspect-ratio: 1000 / 680;
}
.ht-profile-custom[data-ht-frame] .hnrp-frame-stage :is(.team-avatar, .v22-member-avatar) {
  width: 29.6%;
  height: auto;
  margin: 0;
}
.ht-showcase {
  position: relative;
  overflow: hidden;
  min-height: 118px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  margin-bottom: 5px;
  border: 1px solid #294966;
  background: radial-gradient(ellipse at 50% 38%,#173b61,#0b1830 76%);
}
.ht-showcase[data-kind="frame"] { min-height: 133px; }
.ht-showcase-avatar {
  position: relative;
  width: clamp(32px,22%,51px);
  aspect-ratio: 1;
  margin: 16px 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%,#2b476a,#09172b 74%);
}
.ht-background-sample {
  position: absolute;
  inset: 0;
  background: var(--ht-background) center / cover no-repeat;
}
.ht-result .ht-showcase { max-width: 260px; margin: 0 auto 8px; min-height: 165px; }
.ht-result .ht-showcase-avatar { width: 63px; }
.ht-item-locked .ht-lock-cover {
  min-height: 118px;
  background: radial-gradient(ellipse at 50% 38%, #263048, #0c1424 74%);
}
.ht-lock-icon {
  position: relative;
  width: 29px;
  height: 22px;
  margin-top: 13px;
  border-radius: 5px;
  color: #aac0db;
  border: 2px solid currentColor;
  background: radial-gradient(ellipse 3px 5px at center, currentColor 75%, transparent 100%), #172840;
}
.ht-lock-icon::before {
  content: "";
  position: absolute;
  width: 15px;
  height: 14px;
  left: 50%;
  bottom: 100%;
  translate: -50% 0;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
}
.ht-item-locked[data-rarity="eternal"] .ht-lock-icon { color: #ffdca0; }
.ht-item-locked[data-rarity="iconic"] .ht-lock-icon { color: #a5fff2; }

/* Put moving details behind the foreground and keep the artwork full-bleed. */
@media (prefers-reduced-motion: no-preference) {
  [data-ht-background="background-aether"] {
    --ht-background-motion: url("designs/background-motion-aether.webp?v=30");
    --ht-background-motion-size: cover;
  }
  [data-ht-background="background-prismenhimmel"] {
    --ht-background-motion: url("designs/background-motion-prismenhimmel.webp?v=30");
    --ht-background-motion-size: cover;
  }
  [data-ht-background="background-gravitationsfeld"] {
    --ht-background-motion: url("designs/background-motion-gravitationsfeld.webp?v=29");
  }
  [data-ht-background="background-hoellenglut"] {
    --ht-background-motion: url("designs/background-motion-hoellenglut.webp?v=30");
    --ht-background-motion-size: cover;
  }
  [data-ht-background="background-schattenphoenix"] {
    --ht-background-motion: url("designs/background-motion-schattenphoenix.webp?v=30");
    --ht-background-motion-size: cover;
  }
}
.ht-background-sample {
  background-image: var(--ht-background-motion, linear-gradient(transparent, transparent)), var(--ht-background);
  background-size: var(--ht-background-motion-size, 100% 100%), cover;
  background-position: center;
}
.ht-item[data-rarity="mythic"] { border-color: #8e4578; background: linear-gradient(145deg,#24152c,#0b1e34 68%); }
.ht-item[data-rarity="iconic"] { border-color: #63bbdf; background: linear-gradient(150deg,#163455,#0b1e34 70%); }
[data-ht-effect="epic"].ht-showcase {
  border-color: color-mix(in srgb,var(--ht-frame-accent) 42%,#294966);
  background: radial-gradient(ellipse at 50% 42%,color-mix(in srgb,var(--ht-frame-accent) 21%,#162845),#0b1830 75%);
}
[data-ht-effect="legendary"].ht-showcase {
  border-color: color-mix(in srgb,var(--ht-frame-accent) 61%,#294966);
  background: radial-gradient(ellipse at 50% 41%,color-mix(in srgb,var(--ht-frame-accent) 29%,#172944),#101729 76%);
}
.ht-items :is([data-ht-effect="epic"], [data-ht-effect="legendary"]) .ht-showcase-avatar {
  width: clamp(34px,25%,56px);
}
[data-ht-effect] {
  --ht-particle: var(--ht-frame-accent);
  --ht-core: color-mix(in srgb, white 75%, var(--ht-particle));
  --ht-trim-time: 9s;
  --ht-orbit-time: 7s;
}
[data-ht-effect="legendary"] { --ht-trim-time: 6s; --ht-gem-time: 4.8s; --ht-orbit-time: 10s; }
[data-ht-effect="mythic"] { --ht-trim-time: 2.8s; --ht-gem-time: 2s; --ht-orbit-time: 4.5s; --ht-spark: #d6aaff; }
[data-ht-frame="frame-leviathan"] { --ht-spark: #b4ffd9; --ht-orbit-time: 5.6s; }
[data-ht-frame="frame-supernova"] { --ht-spark: #ffe090; --ht-orbit-time: 3.7s; }
[data-ht-effect="iconic"] { --ht-trim-time: 1.7s; --ht-gem-time: 1.6s; --ht-orbit-time: 3.3s; }
[data-ht-effect="eternal"] { --ht-energy: #f1a1ff; }
[data-ht-frame="frame-gravitationskrone"] { --ht-energy: #ab68ff; }
[data-ht-frame="frame-abyssthron"] { --ht-energy: #ff542b; }
[data-ht-effect="eternal"] .ht-profile-ring { filter: drop-shadow(0 0 6px color-mix(in srgb,var(--ht-energy) 45%,transparent)); }
[data-ht-frame="frame-abyssthron"] .ht-profile-ring {
  background: none;
  filter: drop-shadow(0 0 5px #ff501c99) drop-shadow(0 0 10px #c8283f4d);
}
.ht-profile:is([data-ht-frame="frame-seraphenprisma"], [data-ht-frame="frame-abyssthron"]) {
  container-type: inline-size;
  padding-block-start: 62px;
}
.ht-profile:is([data-ht-frame="frame-seraphenprisma"], [data-ht-frame="frame-abyssthron"]) .ht-preview-avatar {
  width: min(85px, 28cqi);
  height: auto;
  aspect-ratio: 1;
  margin-block-end: min(44px, 16cqi);
}
.ht-profile-custom:is([data-ht-frame="frame-seraphenprisma"], [data-ht-frame="frame-abyssthron"]) {
  --ht-avatar-size: min(28cqi, 88px);
}
.ht-profile-custom:is([data-ht-frame="frame-seraphenprisma"], [data-ht-frame="frame-abyssthron"])
  :is(.team-avatar, .v22-member-avatar) {
  margin-block-end: min(43px, 16cqi);
}
.ht-profile-custom:is([data-ht-frame="frame-seraphenprisma"], [data-ht-frame="frame-abyssthron"])
  .hnrp-frame-stage :is(.team-avatar, .v22-member-avatar) {
  margin: 0;
}
.ht-profile-custom[data-ht-frame="frame-seraphenprisma"]::before,
.ht-profile-custom[data-ht-frame="frame-seraphenprisma"]::after {
  background: none !important;
  box-shadow: none !important;
  transition: none !important;
}
[data-ht-effect="eternal"].ht-showcase {
  border-color: color-mix(in srgb,var(--ht-energy) 60%,#7e5f9d);
  background: radial-gradient(ellipse at 50% 42%,#4d2d52,#13132a 72%);
}
[data-ht-frame="frame-gravitationskrone"].ht-showcase {
  background: radial-gradient(ellipse at 58% 49%, #44243c, #121127 72%);
}
[data-ht-frame="frame-abyssthron"].ht-showcase {
  border-color: #995045;
  background: radial-gradient(ellipse at 50% 52%, #542425, #1b1222 76%);
}
.ht-item[data-rarity="eternal"] { border-color: #90709c; background: linear-gradient(149deg,#352642,#101e35 69%); }

/* Glint and orbit overlays share the artwork coordinate system. */
.ht-eternal-vectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  mix-blend-mode: screen;
}
.ht-orbit-paths path { stroke-linecap: round; }
.ht-orbit-paths {
  mask: radial-gradient(ellipse 13.5% 17.5% at 50% 50%, transparent 93%, #000 100%);
}
.ht-wing-particles { position: absolute; inset: 0; pointer-events: none; }
.ht-wing-particles b {
  position: absolute;
  left: var(--ht-grain-x);
  top: var(--ht-grain-y);
  width: var(--ht-grain-size, 1.4%);
  aspect-ratio: 1;
  color: var(--ht-grain-color, #fff1bd);
  opacity: .62;
  filter: drop-shadow(0 0 2px currentColor);
}
.ht-prism-dust b::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  clip-path: polygon(50% 0,62% 37%,100% 50%,62% 63%,50% 100%,38% 63%,0 50%,38% 37%);
}
.ht-wing-particles b:nth-child(6n + 1) { --ht-grain-y: 42%; --ht-grain-size: 1.6%; --ht-grain-time: 2.9s; }
.ht-wing-particles b:nth-child(6n + 2) { --ht-grain-y: 58%; --ht-grain-size: .9%; --ht-grain-time: 2.4s; }
.ht-wing-particles b:nth-child(6n + 3) { --ht-grain-y: 49%; --ht-grain-size: 1.2%; --ht-grain-time: 3.7s; }
.ht-wing-particles b:nth-child(6n + 4) { --ht-grain-y: 64%; --ht-grain-size: 1.9%; --ht-grain-time: 2.7s; }
.ht-wing-particles b:nth-child(6n + 5) { --ht-grain-y: 71%; --ht-grain-size: 1.2%; --ht-grain-time: 3.1s; }
.ht-wing-particles b:nth-child(6n + 6) { --ht-grain-y: 75%; --ht-grain-size: 1.5%; --ht-grain-time: 3.5s; }
.ht-wing-particles b:nth-child(4n + 1) { --ht-grain-delay: -.35s; }
.ht-wing-particles b:nth-child(4n + 2) { --ht-grain-delay: -1.65s; }
.ht-wing-particles b:nth-child(4n + 3) { --ht-grain-delay: -2.4s; }
.ht-wing-particles b:nth-child(4n + 4) { --ht-grain-delay: -1.1s; }
.ht-wing-particles b:nth-child(1) { --ht-grain-x: 9%; }
.ht-wing-particles b:nth-child(2) { --ht-grain-x: 11%; }
.ht-wing-particles b:nth-child(3) { --ht-grain-x: 15%; }
.ht-wing-particles b:nth-child(4) { --ht-grain-x: 17%; }
.ht-wing-particles b:nth-child(5) { --ht-grain-x: 19%; }
.ht-wing-particles b:nth-child(6) { --ht-grain-x: 23%; }
.ht-wing-particles b:nth-child(7) { --ht-grain-x: 22%; }
.ht-wing-particles b:nth-child(8) { --ht-grain-x: 26%; }
.ht-wing-particles b:nth-child(9) { --ht-grain-x: 28%; }
.ht-wing-particles b:nth-child(10) { --ht-grain-x: 30%; }
.ht-wing-particles b:nth-child(11) { --ht-grain-x: 32%; }
.ht-wing-particles b:nth-child(12) { --ht-grain-x: 36%; }
.ht-wing-particles b:nth-child(13) { --ht-grain-x: 91%; }
.ht-wing-particles b:nth-child(14) { --ht-grain-x: 88%; }
.ht-wing-particles b:nth-child(15) { --ht-grain-x: 84%; }
.ht-wing-particles b:nth-child(16) { --ht-grain-x: 82%; }
.ht-wing-particles b:nth-child(17) { --ht-grain-x: 80%; }
.ht-wing-particles b:nth-child(18) { --ht-grain-x: 76%; }
.ht-wing-particles b:nth-child(19) { --ht-grain-x: 78%; }
.ht-wing-particles b:nth-child(20) { --ht-grain-x: 74%; }
.ht-wing-particles b:nth-child(21) { --ht-grain-x: 72%; }
.ht-wing-particles b:nth-child(22) { --ht-grain-x: 70%; }
.ht-wing-particles b:nth-child(23) { --ht-grain-x: 68%; }
.ht-wing-particles b:nth-child(24) { --ht-grain-x: 64%; }
.ht-prism-dust b:nth-child(n + 13):nth-child(3n + 1) { --ht-grain-color: #c8ffff; }
.ht-prism-dust b:nth-child(n + 13):nth-child(3n + 2) { --ht-grain-color: #ffaef2; }
.ht-prism-dust b:nth-child(n + 13):nth-child(3n) { --ht-grain-color: #d3b5ff; }
.ht-frame-abyss-art {
  inset: 0;
  background: var(--ht-frame) center / 100% 100% no-repeat;
}
.ht-abyss-cinders b {
  color: #ff682b;
  aspect-ratio: .65;
  background: radial-gradient(ellipse at 50% 30%, #fff0bf, #ff762e 44%, #be281a 64%, transparent 77%);
}
.ht-abyss-cinders b:nth-child(3n) {
  color: #ff812f;
  background: linear-gradient(#fff3c2, #ff7a24 52%, #a12f1b 83%, transparent);
  width: 1.55%;
  clip-path: polygon(44% 0, 73% 37%, 92% 69%, 55% 100%, 4% 65%);
}
.ht-abyss-cinders b:nth-child(n + 13) { --ht-ember-sway: 105%; }
.ht-frame-abyss-ruby {
  inset: 0;
  background: radial-gradient(ellipse 7% 10% at 50% 17%, #ffc8846b, #ff280c34 45%, transparent 74%);
  mix-blend-mode: screen;
}
/* The moving wave textures leave the center transparent and sit on top of the static frame. */
[data-ht-frame="frame-seraphenprisma"] {
  --ht-wing-wave: url("designs/wave-seraphenprisma.webp?v=23");
  --ht-crystal-y: 84.5%;
  --ht-crystal-color: #db99ff;
  --ht-crystal-core: #fff0d9;
}
[data-ht-frame="frame-abyssthron"] {
  --ht-wing-wave: url("designs/wave-abyssthron.webp?v=24");
  --ht-crystal-y: 78.5%;
  --ht-crystal-color: #ff542c;
  --ht-crystal-core: #ffd49b;
}
.ht-frame-wing-wave {
  inset: 0;
  background: var(--ht-wing-wave) center / 100% 100% no-repeat;
  mix-blend-mode: screen;
  opacity: .89;
}
.ht-frame-lower-crystal {
  left: 50%;
  top: var(--ht-crystal-y);
  width: 8%;
  height: 14%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, var(--ht-crystal-core), var(--ht-crystal-color) 23%, transparent 66%);
  opacity: .60;
  mix-blend-mode: screen;
}
@media (prefers-reduced-motion: reduce) {
  [data-ht-effect] .ht-profile-ring .ht-frame-wing-wave { display: none; }
}
.ht-prism-glint {
  opacity: .73;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 5px #ffd2ab);
}
.ht-prism-glint:nth-child(n + 6):nth-child(-n + 10) {
  filter: drop-shadow(0 0 5px #bbadff);
}
.ht-prism-glint:nth-child(3n + 1) { --ht-glint-time: 2.9s; --ht-glint-delay: -.3s; }
.ht-prism-glint:nth-child(3n + 2) { --ht-glint-time: 3.7s; --ht-glint-delay: -1.4s; }
.ht-prism-glint:nth-child(3n) { --ht-glint-time: 2.6s; --ht-glint-delay: -2.1s; }
.ht-frame-prism-crown {
  left: 15%;
  top: 12%;
  width: 18%;
  aspect-ratio: 1;
  background: radial-gradient(circle,#fff3c961, #ffce6016 38%, transparent 66%);
  opacity: .66;
  mix-blend-mode: screen;
}
/* Asymmetric plasma packets circle closed tracks at a constant speed. */
.ht-orbit-track {
  stroke: #ff7126;
  stroke-width: 3;
  opacity: .61;
}
.ht-orbit-wake {
  stroke: #ff7418;
  stroke-width: 17;
  stroke-dasharray: 11 15 5 69;
  stroke-dashoffset: -9;
  filter: blur(2.1px) drop-shadow(0 0 4px #ff672f);
  opacity: .83;
}
.ht-orbit-core {
  stroke: #fff1a8;
  stroke-width: 8;
  stroke-dasharray: 5.2 15.8 2 18 3 56;
  stroke-dashoffset: -15;
  filter: drop-shadow(0 0 2px #ff9f45);
}
.ht-orbit-paths g:nth-child(2) {
  --ht-orbit-duration: 2.45s;
  --ht-orbit-delay: -1s;
}
.ht-orbit-paths g:nth-child(2) .ht-orbit-wake { stroke-width: 11; }
.ht-orbit-paths g:nth-child(2) .ht-orbit-core { stroke-width: 7; }
.ht-gravity-crack {
  stroke: #edd3ff;
  stroke-width: 2.8;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px #a845fd);
  opacity: .72;
}
.ht-gravity-crack:nth-child(2) { --ht-voltage-delay: -1.9s; }
.ht-frame-gravity-sun-pulse {
  top: 23.2%;
  left: 50.6%;
  width: 17%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, transparent 36%,#ff7d302a 41%,#ff9f62 48%,#ffd78dba 50%,#fc682270 55%,transparent 72%);
  filter: drop-shadow(0 0 5px #ff782f);
  mix-blend-mode: screen;
  opacity: .6;
}
.ht-frame-gravity-burst {
  inset: 1%;
  background: radial-gradient(ellipse 17% 2% at 51% 23%,#ffefb0,#ff9376 38%,transparent),
    radial-gradient(ellipse 1.4% 15% at 51% 23%,#fff6b8,#ff8a39 31%,transparent),
    radial-gradient(ellipse 10% 2.5% at 25% 44%,#ffe7f9,#ee8aff 34%,transparent),
    radial-gradient(ellipse 10% 2% at 80% 60%,#ffe3f0,#b276ff 38%,transparent);
  opacity: .52;
  mix-blend-mode: screen;
}
.ht-frame-gravity-speed {
  inset: 6%;
  background: repeating-conic-gradient(from 10deg, transparent 0 13deg,#b27bff 15deg,transparent 16deg 24deg);
  mask: radial-gradient(ellipse,transparent 49%,#000 63%,transparent 83%);
  opacity: .26;
  transform: rotate(-24deg) scaleY(.82);
  mix-blend-mode: screen;
}
/* The portrait, illustrated frame and its transform stay fixed. */
.ht-eternal-particles { position: absolute; inset: 0; pointer-events: none; }
.ht-eternal-particles b {
  position: absolute;
  display: block;
  width: var(--ht-fragment, 4.5%);
  aspect-ratio: .7;
  translate: -50% -50%;
}
.ht-crystals b {
  left: 50%;
  top: 44%;
  clip-path: polygon(50% 0,96% 41%,57% 100%,4% 48%);
  background:
    linear-gradient(133deg, transparent 24%, #ffffffb8 28% 35%, transparent 43%),
    conic-gradient(from 18deg, #fdfbff, #a88bff, #f59bff, #46488f, #b7feff, #fdfbff);
  transform: translate(var(--ht-x),var(--ht-y)) rotate(var(--ht-tilt));
  opacity: .75;
}
.ht-crystals b:nth-child(1) { --ht-x: -690%; --ht-y: -143%; --ht-tilt: -56deg; --ht-delay: -.6s; }
.ht-crystals b:nth-child(2) { --ht-x: -430%; --ht-y: -263%; --ht-tilt: -18deg; --ht-delay: -1.6s; --ht-fragment: 4%; }
.ht-crystals b:nth-child(3) { --ht-x: -697%; --ht-y: 97%; --ht-tilt: -77deg; --ht-delay: -2.5s; --ht-fragment: 4.2%; }
.ht-crystals b:nth-child(4) { --ht-x: 715%; --ht-y: -163%; --ht-tilt: 48deg; --ht-delay: -.3s; }
.ht-crystals b:nth-child(5) { --ht-x: 480%; --ht-y: -295%; --ht-tilt: 29deg; --ht-delay: -2.2s; --ht-fragment: 3.8%; }
.ht-crystals b:nth-child(6) { --ht-x: 650%; --ht-y: 106%; --ht-tilt: 72deg; --ht-delay: -1.2s; }
.ht-crystals b:nth-child(7) { --ht-x: 21%; --ht-y: -365%; --ht-tilt: 0deg; --ht-delay: -.9s; --ht-fragment: 3.2%; }
.ht-crystals b:nth-child(8) { --ht-x: -472%; --ht-y: 262%; --ht-tilt: -47deg; --ht-delay: -3.1s; --ht-fragment: 3.5%; }
.ht-crystals b:nth-child(9) { --ht-x: 515%; --ht-y: 272%; --ht-tilt: 42deg; --ht-delay: -1.8s; --ht-fragment: 3.3%; }
.ht-debris b {
  --ht-fragment: 5.1%;
  top: 49%;
  left: 50%;
  aspect-ratio: 1;
  background: conic-gradient(from 32deg, #262039,#755387 16%,#332240 38%,#090a22 54%,#614165 72%,#ff975e 74%,#3a2040 81%,#21152f);
  clip-path: polygon(41% 2%,69% 12%,93% 39%,84% 73%,62% 91%,28% 85%,5% 56%,13% 27%);
  offset-path: ellipse(44% 19% at 50% 51%);
  offset-distance: var(--ht-phase);
  offset-rotate: auto;
}
.ht-debris { transform: rotate(-21deg); }
.ht-debris b:nth-child(1) { --ht-phase: 0%; --ht-delay: 0s; }
.ht-debris b:nth-child(2) { --ht-phase: 12.5%; --ht-delay: -.6s; --ht-fragment: 3.6%; }
.ht-debris b:nth-child(3) { --ht-phase: 25%; --ht-delay: -1.2s; --ht-fragment: 4%; }
.ht-debris b:nth-child(4) { --ht-phase: 37.5%; --ht-delay: -1.8s; --ht-fragment: 3%; }
.ht-debris b:nth-child(5) { --ht-phase: 50%; --ht-delay: -2.4s; }
.ht-debris b:nth-child(6) { --ht-phase: 62.5%; --ht-delay: -3s; --ht-fragment: 4%; }
.ht-debris b:nth-child(7) { --ht-phase: 75%; --ht-delay: -3.6s; --ht-fragment: 4.5%; }
.ht-debris b:nth-child(8) { --ht-phase: 87.5%; --ht-delay: -4.2s; --ht-fragment: 3%; }
/* Leave the avatar opening clear even when a rock passes its near edge. */
.ht-debris {
  mask: radial-gradient(ellipse 18% 29% at 50% 51%,transparent 93%,#000 100%);
}
.ht-frame-prism-sigil {
  inset: 5% 17% 5%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 9deg,transparent 0 13deg,#fed6ff 14deg 16deg,transparent 17deg 25deg,#a5f4ff 26deg 28deg,transparent 29deg 30deg);
  mask: radial-gradient(ellipse,transparent 56%,#000 60% 61%,transparent 63% 69%,#000 71% 72%,transparent 75%);
  opacity: .55;
  mix-blend-mode: screen;
}
.ht-frame-gravity-meteor-trails {
  inset: 4%;
  mix-blend-mode: screen;
  opacity: .6;
  background: radial-gradient(ellipse 21% 2% at 15% 68%,#ffe9b2,#f27857 21%,#a46fff 43%,transparent),
    radial-gradient(ellipse 20% 2% at 83% 32%,#efe2ff,#ad56ef 29%,transparent),
    radial-gradient(ellipse 11% 1.4% at 80% 73%,#ffd6aa,#c952c5 28%,transparent),
    radial-gradient(ellipse 15% 1.4% at 25% 28%,#ffd8bd,#a675ff 27%,transparent);
  transform: rotate(-23deg);
}
.ht-frame-gravity-shockwave {
  inset: 14% 0%;
  border-radius: 50%;
  background: conic-gradient(from 20deg, #f8bd88 7%,transparent 13% 25%,#db9dff 34%,#fff0c8 39%,transparent 44% 61%,#a962ed 70%,transparent 78% 90%,#bc6bf8 100%);
  mask: radial-gradient(ellipse,transparent 59%,#000 66%,transparent 72%);
  mix-blend-mode: screen;
  transform: rotate(-22deg) scale(.96,.91);
  opacity: .42;
}

[data-ht-iconic="ice"] { --ht-particle: #62cfff; --ht-core: #eaffff; --ht-spark: #97f7ff; }
[data-ht-iconic="phoenix"] { --ht-particle: #f148d9; --ht-core: #ffe5fb; --ht-spark: #ffc68f; }
[data-ht-iconic="ice"].ht-showcase { background: radial-gradient(ellipse at 50% 36%,#194b81,#071527 76%); }
[data-ht-iconic="phoenix"].ht-showcase { background: radial-gradient(ellipse at 50% 36%,#602352,#190e25 76%); border-color:#713c72; }
[data-ht-effect="mythic"].ht-showcase { background: radial-gradient(ellipse at 37% 34%,#422354,#120f27 73%); border-color: #623f78; }
[data-ht-frame="frame-leviathan"].ht-showcase { background: radial-gradient(ellipse at 46% 41%,#1b5353,#091a28 74%); border-color: #327568; }
[data-ht-frame="frame-supernova"].ht-showcase { background: radial-gradient(ellipse at 56% 36%,#67392b,#200f21 74%); border-color: #95583e; }
[data-ht-effect="iconic"] .ht-profile-ring { filter: drop-shadow(0 0 6px color-mix(in srgb,var(--ht-particle) 45%, transparent)); }
[data-ht-effect] .ht-profile-ring i { position: absolute; display: block; pointer-events: none; }
.ht-frame-gem {
  left: 44%; top: 69%; width: 12%; height: 20%;
  background: radial-gradient(ellipse, var(--ht-core),var(--ht-particle) 26%,transparent 68%);
  mix-blend-mode: screen;
  opacity: .28;
}
.ht-frame-trim {
  inset: 22% 28% 24%;
  border-radius: 50%;
  background: conic-gradient(from 32deg, transparent 6%,var(--ht-particle) 11%,var(--ht-core) 13%,transparent 17% 100%);
  mask: radial-gradient(ellipse, transparent 64%, black 69% 72%, transparent 76%);
  opacity: .42;
}
[data-ht-effect="epic"] .ht-frame-trim { opacity: .2; }
[data-ht-effect="legendary"] .ht-frame-trim { opacity: .32; }
[data-ht-effect="legendary"] .ht-frame-orbit { opacity: .48; }
.ht-frame-orbit {
  inset: 24% 31%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 3% 50%,var(--ht-core) 0 2%,var(--ht-particle) 4%,transparent 8%),
    radial-gradient(circle at 91% 26%,var(--ht-core) 0 2%,var(--ht-particle) 4%,transparent 7%),
    radial-gradient(circle at 58% 93%,var(--ht-core) 0 1.4%,var(--ht-particle) 3%,transparent 6%);
  filter: drop-shadow(0 0 5px var(--ht-particle));
}
.ht-frame-flow {
  inset: -3%;
  background:
    radial-gradient(ellipse 17% 3% at 17% 56%,var(--ht-core),var(--ht-particle) 23%,transparent),
    radial-gradient(ellipse 17% 3% at 82% 48%,var(--ht-core),var(--ht-particle) 23%,transparent),
    radial-gradient(ellipse 18% 3% at 16% 33%,var(--ht-particle) 12%,transparent 92%),
    radial-gradient(ellipse 18% 3% at 83% 67%,var(--ht-particle) 12%,transparent 92%);
  opacity: .38;
  mix-blend-mode: screen;
  transform: rotate(-9deg);
}
.ht-frame-motes {
  inset: 7% 4%;
  background:
    radial-gradient(circle at 29% 22%,var(--ht-core) 0 .7%,transparent 1.55%),
    radial-gradient(circle at 11% 47%,var(--ht-particle) 0 .8%,transparent 1.5%),
    radial-gradient(circle at 27% 68%,var(--ht-core) 0 .65%,transparent 1.35%),
    radial-gradient(circle at 87% 27%,var(--ht-particle) 0 .7%,transparent 1.5%),
    radial-gradient(circle at 78% 54%,var(--ht-core) 0 .7%,transparent 1.6%),
    radial-gradient(circle at 91% 68%,var(--ht-core) 0 .65%,transparent 1.55%);
  filter: drop-shadow(0 0 3px var(--ht-particle));
  opacity: .52;
}
.ht-frame-ribbons {
  inset: 3% 2%;
  background: conic-gradient(from 0deg,transparent 4%, var(--ht-spark) 10%,transparent 16% 27%,
    var(--ht-particle) 37%,transparent 42% 60%,var(--ht-spark) 68%,transparent 71% 83%,var(--ht-particle) 89%,transparent 95%);
  mask-image:
    radial-gradient(ellipse 25% 48% at 17% 29%,transparent 80%,black 88% 91%,transparent 98%),
    radial-gradient(ellipse 25% 48% at 83% 29%,transparent 80%,black 88% 91%,transparent 98%);
  mix-blend-mode: screen;
  opacity: .63;
}
.ht-frame-crescent {
  inset: 15% 27%;
  background: conic-gradient(from -40deg, transparent 12%,var(--ht-particle) 17%,var(--ht-core) 22%,transparent 23% 58%,var(--ht-spark) 67%,transparent 72%);
  mask: radial-gradient(ellipse,transparent 61%,black 67% 70%,transparent 75%);
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: .62;
}
.ht-frame-sparks {
  inset: 1% -1%;
  background:
    radial-gradient(ellipse 3.8% 1% at 5% 48%,var(--ht-core),var(--ht-particle) 37%,transparent),
    radial-gradient(ellipse 4% .9% at 19% 25%,var(--ht-core),var(--ht-spark) 35%,transparent),
    radial-gradient(ellipse 5% 1% at 26% 73%,var(--ht-core),var(--ht-particle) 53%,transparent),
    radial-gradient(ellipse 4.5% .8% at 94% 48%,var(--ht-core),var(--ht-particle) 37%,transparent),
    radial-gradient(ellipse 3.9% .9% at 83% 24%,var(--ht-core),var(--ht-spark) 50%,transparent),
    radial-gradient(ellipse 5% 1.2% at 75% 73%,var(--ht-core),var(--ht-particle) 51%,transparent);
  mix-blend-mode: screen;
  opacity: .55;
}
.ht-frame-crest {
  inset: 1% 32% 68%;
  background:
    radial-gradient(ellipse 36% 4% at center,var(--ht-core),var(--ht-spark) 20%,transparent 88%),
    radial-gradient(ellipse 5% 44% at center,var(--ht-core),var(--ht-particle) 25%,transparent 83%),
    radial-gradient(ellipse 22% 26% at center,var(--ht-core),var(--ht-particle) 38%,transparent 93%);
  mix-blend-mode: screen;
  opacity: .46;
}
@media (prefers-reduced-motion: no-preference) {
  .ht-prism-dust b { animation: ht-prism-rain var(--ht-grain-time) linear var(--ht-grain-delay) infinite; }
  .ht-frame-abyss-art { animation: ht-abyss-red-breathe 5.4s ease-in-out infinite alternate; }
  .ht-abyss-cinders b { animation: ht-abyss-fall var(--ht-grain-time) linear var(--ht-grain-delay) infinite; }
  .ht-frame-abyss-ruby { animation: ht-abyss-haze 3.6s ease-in-out -2.1s infinite alternate; }
  .ht-frame-lower-crystal { animation: ht-lower-crystal-glow 4.3s ease-in-out infinite alternate; }
  @keyframes ht-lower-crystal-glow {
    from { opacity: .50; }
    to { opacity: .76; }
  }
  .ht-prism-glint { animation: ht-prism-facet-glint var(--ht-glint-time) ease-in-out var(--ht-glint-delay) infinite; }
  .ht-gravity-crack { animation: ht-gravity-voltage 3.6s linear var(--ht-voltage-delay, -.4s) infinite; }
  .ht-orbit-core, .ht-orbit-wake {
    animation: ht-orbit-travel var(--ht-orbit-duration,2.15s) linear var(--ht-orbit-delay,-.23s) infinite;
  }
  .ht-orbit-wake { animation-name: ht-orbit-trail; }
  @keyframes ht-prism-rain {
    0% { opacity: 0; transform: translate(0, -30%) scale(.55); }
    17%,40% { opacity: 1; }
    29% { opacity: .55; }
    60% { opacity: .85; }
    88%,100% { opacity: 0; transform: translate(120%, clamp(15px, 9cqi, 34px)) rotate(135deg) scale(.54); }
  }
  @keyframes ht-abyss-red-breathe {
    from { filter: brightness(.94) saturate(1.10) hue-rotate(-4deg); }
    to { filter: brightness(1.03) saturate(1.02) hue-rotate(0deg); }
  }
  @keyframes ht-abyss-fall {
    0% { opacity: 0; transform: translate(0,-12%) scale(.65); }
    14% { opacity: .95; }
    52% { opacity: .73; transform: translate(var(--ht-ember-sway,-105%), 340%) rotate(25deg) scale(.84); }
    94%,100% { opacity: 0; transform: translate(var(--ht-ember-sway,-105%), 1320%) rotate(110deg) scale(.28); }
  }
  @keyframes ht-abyss-haze {
    from { opacity: .39; }
    to { opacity: .78; }
  }
  @keyframes ht-prism-facet-glint {
    0%,100% { opacity: .34; transform: scale(.55); }
    38% { opacity: 1; transform: scale(1.3); }
    61% { opacity: .62; transform: scale(.86); }
  }
  @keyframes ht-gravity-voltage {
    0%,100% { opacity: .38; }
    33% { opacity: .5; }
    37%,46% { opacity: 1; }
    41%,52% { opacity: .59; }
  }
  @keyframes ht-orbit-travel { from { stroke-dashoffset: -15; } to { stroke-dashoffset: -115; } }
  @keyframes ht-orbit-trail { from { stroke-dashoffset: -9; } to { stroke-dashoffset: -109; } }
  .ht-crystals b { animation: ht-prism-facets 3.9s ease-in-out var(--ht-delay) infinite; }
  .ht-debris b { animation: ht-debris-orbit 4.8s linear var(--ht-delay) infinite; }
  .ht-frame-prism-sigil { animation: ht-prism-sigil 8s linear infinite; }
  .ht-frame-gravity-shockwave { animation: ht-gravity-shockwave 4.8s cubic-bezier(.13,.7,.45,1) infinite; }
  .ht-frame-gravity-meteor-trails { animation: ht-meteor-cross 4.8s ease-in-out -.2s infinite; }
  @keyframes ht-prism-facets {
    0%,100% { transform: translate(var(--ht-x),var(--ht-y)) rotate(var(--ht-tilt)) scale(.7); opacity: .39; }
    38% { transform: translate(calc(var(--ht-x) * 1.27),calc(var(--ht-y) * 1.13)) rotate(calc(var(--ht-tilt) + 85deg)) scale(1.15); opacity: .95; }
    70% { transform: translate(calc(var(--ht-x)*1.08),calc(var(--ht-y)*.94)) rotate(calc(var(--ht-tilt) + 159deg)) scale(.9); opacity: .57; }
  }
  @keyframes ht-debris-orbit {
    0% { offset-distance: 0%; transform: rotate(0deg) scale(.7); }
    25% { transform: rotate(90deg) scale(1); }
    60% { transform: rotate(216deg) scale(.95); }
    100% { offset-distance: 100%; transform: rotate(360deg) scale(.7); }
  }
  @keyframes ht-prism-sigil { to { transform: rotate(360deg); } }
  @keyframes ht-gravity-shockwave {
    0%,100% { opacity: 0; transform: rotate(-22deg) scale(.62,.64); }
    20% { opacity: .84; }
    63% { opacity: 0; transform: rotate(-22deg) scale(1.24,1.12); }
  }
  @keyframes ht-meteor-cross {
    0%,100% { opacity: .15; transform: rotate(-26deg) translate(-11%, 7%); }
    37% { opacity: .95; }
    71% { opacity: .12; transform: rotate(-26deg) translate(11%, -8%); }
  }
  .ht-frame-gravity-sun-pulse { animation: ht-sun-breathe 4.6s ease-out infinite; }
  .ht-frame-prism-crown { animation: ht-prism-glints 3.6s ease-in-out -.55s infinite; }
  .ht-frame-gravity-burst { animation: ht-gravity-rift 4.8s ease-in-out -.35s infinite; }
  .ht-frame-gravity-speed { animation: ht-gravity-speed 4.8s ease-out infinite; }
  @keyframes ht-sun-breathe {
    0%,100% { transform: translate(-50%,-50%) scale(.82); opacity: .17; }
    28% { opacity: .87; }
    66% { transform: translate(-50%,-50%) scale(1.62); opacity: 0; }
  }
  @keyframes ht-prism-glints {
    0%, 100% { opacity: .18; transform: scale(.87); }
    38% { opacity: .86; transform: scale(1.14); }
    64% { opacity: .48; transform: scale(1); }
  }
  @keyframes ht-gravity-rift {
    0%,100% { transform: scale(.88) rotate(3deg); opacity: .12; }
    27% { transform: scale(1.03) rotate(-3deg); opacity: .9; }
    62% { transform: scale(1.09) rotate(0deg); opacity: .38; }
  }
  @keyframes ht-gravity-speed {
    0%,100% { opacity: .14; transform: rotate(-24deg) scale(.84,.67); }
    31% { opacity: .65; transform: rotate(-15deg) scale(1.13,.89); }
    78% { opacity: .19; transform: rotate(4deg) scale(1.18,.85); }
  }
  .ht-frame-gem { animation: ht-gem var(--ht-gem-time) ease-in-out infinite; }
  [data-ht-effect="legendary"] .ht-frame-gem { animation-name: ht-gem-soft; }
  .ht-frame-trim { animation: ht-orbit var(--ht-trim-time) linear infinite; }
  .ht-frame-orbit { animation: ht-orbit var(--ht-orbit-time) linear infinite reverse; }
  .ht-frame-flow { animation: ht-wing-light 2.45s ease-in-out infinite; }
  .ht-frame-motes { animation: ht-motes 2.6s ease-out infinite; }
  .ht-frame-ribbons { animation: ht-ribbons 1.65s ease-in-out infinite alternate; }
  .ht-frame-crescent { animation: ht-orbit 4.3s linear infinite; }
  .ht-frame-sparks { animation: ht-sparks 1.9s ease-out infinite; }
  .ht-frame-crest { animation: ht-gem 2.2s ease-in-out infinite -.9s; }
  [data-ht-frame="frame-leviathan"] .ht-frame-crescent { animation-direction: reverse; animation-duration: 5.8s; }
  [data-ht-frame="frame-supernova"] .ht-frame-sparks { rotate: -27deg; animation-duration: 1.7s; }
  [data-ht-iconic="phoenix"] .ht-frame-flow { animation-duration: 1.6s; animation-direction: alternate-reverse; }
  [data-ht-iconic="phoenix"] .ht-frame-orbit { animation-direction: normal; }
  [data-ht-iconic="phoenix"] .ht-frame-motes { animation-duration: 1.85s; }
  [data-ht-iconic="phoenix"] .ht-frame-ribbons { animation-direction: alternate-reverse; animation-duration: 1.1s; }
  [data-ht-iconic="ice"] .ht-frame-sparks { rotate: -9deg; animation-duration: 2.3s; }
  @keyframes ht-orbit { to { rotate: 360deg; } }
  @keyframes ht-gem {
    0%,100% { opacity: .18; transform: scale(.76); }
    32% { opacity: .89; transform: scale(1.17); }
    66% { opacity: .35; transform: scale(.97); }
  }
  @keyframes ht-gem-soft {
    0%,100% { opacity: .12; }
    50% { opacity: .46; }
  }
  @keyframes ht-wing-light {
    0%,100% { transform: translateY(14%) scale(.64) rotate(-13deg); opacity: .15; }
    41% { transform: translateY(-8%) scale(1.06) rotate(-5deg); opacity: .89; }
    74% { transform: translateY(-15%) scale(1.10) rotate(7deg); opacity: .28; }
  }
  @keyframes ht-motes {
    0% { opacity: 0; transform: translateY(15%) scale(.8); }
    27% { opacity: 1; }
    82%,100% { opacity: 0; transform: translateY(-25%) scale(1.09); }
  }
  @keyframes ht-ribbons {
    from { opacity: .24; transform: translateY(7%) scale(.88) rotate(-12deg); }
    to { opacity: .97; transform: translateY(-5%) scale(1.1) rotate(10deg); }
  }
  @keyframes ht-sparks {
    0% { opacity: 0; transform: scale(.75); }
    35% { opacity: 1; }
    85%,100% { opacity: 0; transform: translateY(-13%) scale(1.17); }
  }
}
@media (max-width: 620px) {
  .ht-showcase[data-kind="frame"] { min-height: 108px; }
  .ht-profile-custom[data-ht-frame] { --ht-avatar-size: min(44px, 16vw); padding: 25px 7px 12px; min-height: 190px; }
}

/* Reserve the same portrait and name rows for every roster card. */
.v22-team-grid .v22-member,
.team-grid .team-profile,
.team-grid .team-profile.ht-profile-custom,
.team-grid .team-profile[data-hnrp-frame],
.v22-team-grid .v22-member[data-hnrp-frame] {
  container-type: inline-size;
  --ht-roster-avatar: min(94px, 28cqi);
  --ht-roster-slot: clamp(104px, 16vw, 191px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--ht-roster-slot) minmax(48px, auto);
  align-content: start;
  justify-items: center;
  align-items: center;
  gap: 8px;
  padding: 18px 12px;
  min-height: 0;
}
.v22-team-grid .v22-member .v22-member-avatar,
.team-grid .team-profile .team-avatar {
  width: var(--ht-roster-avatar);
  height: var(--ht-roster-avatar);
  margin: 0;
}
.v22-team-grid .v22-member .v22-member-display,
.team-grid .team-profile > div:last-child {
  grid-row: 2;
  align-self: start;
  margin: 0;
  width: 100%;
  min-height: 48px;
  display: grid;
  place-content: center;
  overflow-wrap: anywhere;
}
.v22-team-grid .v22-member .v22-member-hint {
  grid-row: 3;
  margin: 0;
}
.v22-member[data-ht-yuna-bot] .v22-member-hint { display: none; }
.ht-profile, .ht-profile[data-ht-frame],
.ht-profile:is([data-ht-frame="frame-seraphenprisma"], [data-ht-frame="frame-abyssthron"]) {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 8px;
  padding: 10px;
}
.ht-profile .ht-preview-avatar,
.ht-profile:is([data-ht-frame="frame-seraphenprisma"], [data-ht-frame="frame-abyssthron"]) .ht-preview-avatar {
  width: min(85px, 28cqi);
  height: auto;
  margin: 0;
}
.ht-profile #ht-name {
  display: grid;
  place-items: center;
  min-height: 44px;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.ht-profile .ht-preview-avatar { grid-area: 1 / 1; }
.ht-profile::before {
  content: "";
  grid-area: 1 / 1;
  width: 100%;
  height: clamp(101px, 65cqi, 195px);
}
.v22-team-grid .v22-member .hnrp-frame-stage,
.team-grid .team-profile .hnrp-frame-stage {
  height: var(--ht-roster-slot);
  aspect-ratio: auto;
}
.v22-team-grid .v22-member .hnrp-frame-stage :is(.hnrp-frame-layer,.hnrp-frame-fluss),
.team-grid .team-profile .hnrp-frame-stage :is(.hnrp-frame-layer,.hnrp-frame-fluss) {
  inset: 50% auto auto 50%;
  width: min(100%, 340px);
  height: auto;
  aspect-ratio: 1000 / 680;
  translate: -50% -50%;
}
.v22-team-grid .v22-member .hnrp-frame-stage .v22-member-avatar,
.team-grid .team-profile .hnrp-frame-stage .team-avatar { position: absolute; }
@media (max-width: 720px) {
  .v22-team-grid .v22-member, .team-grid .team-profile,
  .team-grid .team-profile.ht-profile-custom, .team-grid .team-profile[data-hnrp-frame],
  .v22-team-grid .v22-member[data-hnrp-frame] {
    --ht-roster-slot: clamp(104px, 32vw, 162px);
  }
}

.ht-wheel-picker, .ht-spin-gift-form label {
  display: grid;
  gap: 5px;
  color: var(--ht-muted);
  font-weight: 650;
}
.ht-wheel-picker { max-width: 340px; text-align: start; margin: 12px auto 0; }
.ht-wheel-picker select, .ht-spin-gift-form input, .ht-spin-gift-form select {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: 7px 11px;
  color: var(--ht-text);
  background: #0d2036;
  border: 1px solid #406b8b;
  border-radius: 8px;
  font: inherit;
}
.ht-wheel-picker select:focus-visible, .ht-spin-gift-form :is(input, select):focus-visible {
  outline: 2px solid #a6deff;
  outline-offset: 2px;
}
.ht-wheel-wrap[data-wheel="titles"] { opacity: .69; }
.ht-wheel-wrap[data-wheel="titles"] .ht-pointer { display: none; }
.ht-wheel-wrap { container-type: inline-size; }
.ht-title-wheel-note, .ht-spin-rewards {
  padding: 10px 12px;
  border: 1px solid #3d6283;
  border-radius: 10px;
  background: #153552;
}
.ht-spin-rewards { color: #edddac; border-color: #786847; background: #292939; }
.ht-spin-gift-form {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(100px, 1fr) auto;
  align-items: end;
  gap: 12px;
}
.ht-guarantee-form {
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  margin-bottom: 10px;
}
@media (max-width: 840px) {
  .ht-guarantee-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ht-gift-status { margin-bottom: 0; color: #ace2c8; overflow-wrap: anywhere; }
.ht-gift-status:empty { display: none; }
.ht-gift-status[data-error="1"] { color: #ffb5bd; }
@media (max-width: 590px) {
  .ht-spin-gift-form { grid-template-columns: 1fr; }
}

.ht-reveal {
  --ht-reveal-main: #fa7967;
  --ht-reveal-hot: #fff1ba;
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: grid;
  place-items: center;
  isolation: isolate;
  z-index: 2;
}
.ht-reveal[data-rarity="iconic"] { --ht-reveal-main: #49e5ff; --ht-reveal-hot: #e5fbff; }
.ht-reveal[data-rarity="eternal"] { --ht-reveal-main: #ffbc58; --ht-reveal-hot: #fff8cd; }
.ht-reveal[data-rarity="singularity"] { --ht-reveal-main: #e65dff; --ht-reveal-hot: #e5c7ff; }
.ht-reveal-aura, .ht-reveal-rings, .ht-reveal-sparks { position: absolute; inset: 0; border-radius: 50%; }
.ht-reveal-aura {
  background: radial-gradient(circle, #08101e 8%, color-mix(in srgb, var(--ht-reveal-main) 66%, transparent) 31%, transparent 65%);
}
.ht-reveal[data-rarity="singularity"] .ht-reveal-aura {
  background: radial-gradient(circle, #04030e 21%, #211039 25%, var(--ht-reveal-main) 31%, #52248a80 44%, transparent 70%);
}
.ht-reveal-rings {
  inset: 9%;
  border: 2px solid var(--ht-reveal-hot);
  outline: 4px solid color-mix(in srgb, var(--ht-reveal-main) 64%, transparent);
  outline-offset: -12px;
  box-shadow: inset 0 0 20px var(--ht-reveal-main), 0 0 24px var(--ht-reveal-main);
}
.ht-reveal[data-rarity="iconic"] .ht-reveal-rings {
  border-style: dashed;
  border-radius: 32%;
}
.ht-reveal[data-rarity="eternal"] .ht-reveal-rings {
  border: 3px double var(--ht-reveal-hot);
  outline-offset: 5px;
  transform: rotate(45deg) scale(.87);
  border-radius: 26%;
}
.ht-reveal[data-rarity="singularity"] .ht-reveal-rings {
  border-style: dashed;
  box-shadow: 0 0 28px var(--ht-reveal-main), inset 0 0 38px #0a031e;
}
.ht-reveal-sparks i {
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 19px;
  background: linear-gradient(var(--ht-reveal-hot), var(--ht-reveal-main), transparent);
  clip-path: polygon(50% 0,100% 31%,50% 100%,0 31%);
  transform: rotate(var(--ht-ray)) translateY(-82px);
}
.ht-reveal-label {
  position: relative;
  max-width: 92%;
  padding: .4em .6em;
  border: 1px solid var(--ht-reveal-main);
  border-radius: 8px;
  background: #100c1af2;
  color: var(--ht-reveal-hot);
  font: 900 clamp(17px, 3.7vw, 34px)/1.1 system-ui, sans-serif;
  text-shadow: 0 0 12px var(--ht-reveal-main);
}
@media (prefers-reduced-motion: reduce) {
  .ht-reveal-aura, .ht-reveal-rings, .ht-reveal-sparks { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .ht-reveal { animation: ht-reveal-clear 2.5s ease-out both; }
  .ht-reveal-aura { animation: ht-reveal-ignition 1.4s cubic-bezier(.16,.75,.26,1) both; }
  .ht-reveal-rings { animation: ht-reveal-shock 1.6s cubic-bezier(.2,.75,.21,1) both; }
  .ht-reveal[data-rarity="iconic"] .ht-reveal-rings { animation-name: ht-reveal-crystal; }
  .ht-reveal[data-rarity="eternal"] .ht-reveal-rings { animation-name: ht-reveal-corona; }
  .ht-reveal[data-rarity="singularity"] .ht-reveal-rings { animation-name: ht-reveal-collapse; }
  .ht-reveal-sparks i { animation: ht-reveal-spark 1s ease-out var(--ht-ray-delay) both; }
  .ht-reveal[data-rarity="singularity"] .ht-reveal-sparks i { animation-direction: reverse; }
  .ht-reveal-label { animation: ht-reveal-title 1.8s ease-out both; }
  @keyframes ht-reveal-clear { 0%, 74% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
  @keyframes ht-reveal-ignition {
    0% { opacity: 0; transform: scale(.22); }
    32% { opacity: .95; transform: scale(1.09); }
    100% { opacity: .32; transform: scale(1.2); }
  }
  @keyframes ht-reveal-shock {
    0% { opacity: 1; transform: scale(.24); }
    90%, 100% { opacity: 0; transform: scale(1.45); }
  }
  @keyframes ht-reveal-crystal {
    0% { opacity: 0; transform: rotate(-65deg) scale(.28); }
    26% { opacity: 1; transform: rotate(45deg) scale(.96); }
    100% { opacity: 0; transform: rotate(95deg) scale(1.3); }
  }
  @keyframes ht-reveal-corona {
    0% { opacity: 0; transform: rotate(45deg) scale(.18); }
    30% { opacity: 1; transform: rotate(45deg) scale(.89); }
    65% { opacity: .8; transform: rotate(80deg) scale(1); }
    100% { opacity: 0; transform: rotate(125deg) scale(1.42); }
  }
  @keyframes ht-reveal-collapse {
    0% { opacity: 0; transform: rotate(-140deg) scale(1.28); }
    31% { opacity: 1; transform: rotate(-40deg) scale(.62); }
    57% { opacity: .9; transform: rotate(10deg) scale(.28); }
    100% { opacity: 0; transform: rotate(65deg) scale(1.34); }
  }
  @keyframes ht-reveal-spark {
    0% { opacity: 0; transform: rotate(var(--ht-ray)) translateY(-14px) scale(.5); }
    29% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--ht-ray)) translateY(max(-58cqi, calc(0px - var(--ht-ray-length)))) scale(.3); }
  }
  @keyframes ht-reveal-title {
    0%, 21% { opacity: 0; transform: translateY(8px) scale(.88); }
    45%, 100% { opacity: 1; transform: none; }
  }
}