[data-hnrp-frame] {
  --frame-metal: #64c5ff;
  min-width: 0;
}
[data-hnrp-frame="eisdrache"] {
  --frame-image: url("eisdrache.webp");
  --frame-rgb: 86 184 255;
  --frame-deep: #0a1837;
}
[data-hnrp-frame="phoenix"] {
  --frame-image: url("phoenix.webp");
  --frame-metal: #ed89ed;
  --frame-rgb: 243 98 209;
  --frame-deep: #25102f;
}
.v22-member[data-hnrp-frame],
.team-grid .team-profile[data-hnrp-frame] {
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 14px 10px 18px;
  position: relative;
  border-color: var(--frame-metal) !important;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 35%, rgb(var(--frame-rgb) / .27), transparent 56%),
    linear-gradient(155deg, var(--frame-deep), #09162a 84%) !important;
  box-shadow: inset 0 0 28px rgb(var(--frame-rgb) / .12),
              0 10px 28px #040e266b;
}
.v22-member[data-hnrp-frame]::before,
.team-grid .team-profile[data-hnrp-frame]::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  border: 1px solid rgb(var(--frame-rgb) / .35);
  background:
    linear-gradient(135deg, var(--frame-metal) 0%, transparent 2.8%) top left / 45% 48% no-repeat,
    linear-gradient(225deg, var(--frame-metal) 0%, transparent 2.8%) top right / 45% 48% no-repeat,
    linear-gradient(45deg, var(--frame-metal) 0%, transparent 2.8%) bottom left / 45% 48% no-repeat,
    linear-gradient(315deg, var(--frame-metal) 0%, transparent 2.8%) bottom right / 45% 48% no-repeat;
  transform: none;
}
.v22-member[data-hnrp-frame]:hover::before {
  transform: none;
}
[data-hnrp-frame] .v22-member-name,
.team-grid .team-profile[data-hnrp-frame] strong {
  text-shadow: 0 0 12px rgb(var(--frame-rgb) / .62), 0 1px 4px #020819;
  overflow-wrap: anywhere;
}
.hnrp-frame-stage {
  position: relative;
  isolation: isolate;
  width: min(100%, 340px);
  aspect-ratio: 1000 / 680;
  flex: none;
}
.hnrp-frame-stage .v22-member-avatar,
.team-grid .team-profile .hnrp-frame-stage .team-avatar {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: 30%;
  height: auto;
  aspect-ratio: 1;
  border: 0;
  background: #11284a;
  box-shadow: none;
  border-radius: 50%;
}
.hnrp-frame-stage .v22-member-avatar img,
.hnrp-frame-stage .team-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hnrp-frame-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--frame-image) center / 100% 100% no-repeat;
}
.hnrp-frame-mitte {
  filter: drop-shadow(0 0 8px rgb(var(--frame-rgb) / .36));
}
.hnrp-frame-fluss {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}
.hnrp-frame-kristall {
  clip-path: polygon(50% 69.7%, 53.3% 77.6%, 50% 87.7%, 46.6% 77.6%);
  mix-blend-mode: screen;
  opacity: .10;
}
.hnrp-frame-visible .hnrp-frame-kristall {
  animation: hnrp-frame-gem 1s ease-in-out infinite;
}
@keyframes hnrp-frame-gem {
  0%, 100% { opacity: .10; filter: brightness(1); }
  23% { opacity: .95; filter: brightness(2.6) saturate(1.25); }
  54% { opacity: .35; filter: brightness(1.35); }
}
@media (max-width: 600px) {
  .v22-member[data-hnrp-frame],
  .team-grid .team-profile[data-hnrp-frame] {
    gap: 8px;
    padding: 13px 7px 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hnrp-frame-visible .hnrp-frame-kristall { animation: none; }
  .hnrp-frame-fluss { display: none; }
}