/* A gilded, six-sided object. Surface effects stay inside each face; the rotor
   must remain unclipped and unfiltered to preserve the two-sided 3D flip. */
.mha-relic-gallery {
  --relic-gold: #ebce86;
  --relic-cream: #fff1cc;
  --relic-wine: #530e28;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  padding: 36px 24px 26px;
  color: var(--relic-cream);
  background: radial-gradient(ellipse at 50% 40%, #62213a 0%, #300d1c 46%, #190b12 90%);
  border: 1px solid #ba8b4b6b;
  text-align: center;
  font: 400 14px/1.5 'Manrope', sans-serif;
}
.mha-relic-gallery *, .mha-relic-gallery *::before, .mha-relic-gallery *::after { box-sizing: border-box; }
.mha-relic-gallery::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid #cba46b26;
  pointer-events: none;
  z-index: -1;
}
.mha-relic-gallery .mha-relic-eyebrow { color: #d9b876; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
.mha-relic-gallery .mha-relic-intro h2 { color: #f4deb0; margin: 9px 0 5px; font: 400 clamp(28px, 3vw, 38px)/1.2 'IM Fell English', Georgia, serif; }
.mha-relic-gallery .mha-relic-intro p { margin: 0; font: 400 12px/1.6 'Manrope', sans-serif; color: #c5a9ab; }
.mha-relic-space {
  position: relative;
  width: min(100%, 420px);
  margin: 28px auto 26px;
  perspective: 1400px;
  container-type: inline-size;
}
.mha-relic-space::before {
  content: '';
  position: absolute;
  bottom: -22px;
  left: 16%;
  width: 68%;
  height: 33px;
  background: radial-gradient(ellipse, #0009, transparent 70%);
  pointer-events: none;
}
.mha-relic-gallery .mha-relic {
  --relic-x: 35%;
  --relic-y: 22%;
  --relic-shape: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: .8660254;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--relic-cream);
  font: inherit;
  cursor: pointer;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  transform-style: preserve-3d;
  transform: rotateX(var(--relic-rx, 0deg)) rotateY(var(--relic-ry, 0deg));
  transition: transform 180ms ease-out;
  text-align: center;
  box-shadow: none;
}
.mha-relic-gallery .mha-relic:active { transform: rotateX(var(--relic-rx, 0deg)) rotateY(var(--relic-ry, 0deg)); }
.mha-relic-gallery .mha-relic:focus-visible { outline: 2px solid #fff0b1; outline-offset: 8px; border-radius: 5px; }
.mha-relic-turn { display: block; position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 900ms cubic-bezier(.2, .7, .15, 1); }
.mha-relic[data-side='back'] .mha-relic-turn { transform: rotateY(180deg); }
.mha-relic-face {
  position: absolute;
  inset: 0;
  display: block;
  clip-path: var(--relic-shape);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background: linear-gradient(135deg, #8a541c 0%, #ffedac 13%, #a57636 25%, #f8de8f 39%, #8c551e 52%, #ffebbc 70%, #b98436 83%, #ffe2a2 96%);
}
.mha-relic-front { transform: translateZ(1px); }
.mha-relic-back { transform: rotateY(180deg) translateZ(1px); }
.mha-relic-inset { position: absolute; inset: 5px; display: block; clip-path: var(--relic-shape); overflow: hidden; background: #420f22; }
.mha-relic-gallery .mha-relic-portrait { display: block; position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 43%; }
/* A hollow polygon leaves a second gilded keyline around the artwork. */
.mha-relic-edge { position: absolute; inset: 11px; pointer-events: none; }
.mha-relic-edge::before { content: ''; position: absolute; inset: 0; background: linear-gradient(130deg, #fff0b1b3, #b97b2540 30%, #f1dba7b0 53%, #bc7f2a70 80%); clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%,50% 0%,50% .35%,.35% 25.2%,.35% 74.8%,50% 99.65%,99.65% 74.8%,99.65% 25.2%,50% .35%); }
.mha-relic-vignette { position: absolute; inset: 0; background: linear-gradient(180deg, #1d041452, transparent 30%, transparent 55%, #31081d94 69%, #2c061bd9 79%, #220818 97%); }
.mha-relic-foil, .mha-relic-glitter { position: absolute; inset: 0; pointer-events: none; }
.mha-relic-foil {
  background: repeating-linear-gradient(116deg, #a9f7fa00 0%, #a9f7fa50 9%, #dbb1ff66 17%, #ffdfa833 25%, #fba8de44 34%, #b1ffd04d 42%, #a9f7fa00 50%);
  background-size: 270% 270%;
  background-position: var(--relic-x) var(--relic-y);
  mix-blend-mode: color-dodge;
  opacity: .5;
  mask-image: linear-gradient(145deg, #000 5%, #0002 31%, #0000 45%, #0002 60%, #000 90%);
}
.mha-relic-foil::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at var(--relic-x) var(--relic-y), #fff8e18c, #f9d6ff17 30%, transparent 56%); mix-blend-mode: screen; }
.mha-relic-inset::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(125deg, transparent 23%, #fff6e524 30%, #fff6e509 39%, transparent 48%); background-size: 220% 100%; background-position: var(--relic-x) center; mix-blend-mode: screen; }
.mha-relic-glitter {
  opacity: .6;
  background-image: radial-gradient(circle, #fffbdc 0 .6px, transparent 1.2px), radial-gradient(circle, #edc980 0 .5px, transparent 1px), radial-gradient(circle, #baf6ff 0 .6px, transparent 1.1px);
  background-size: 43px 67px, 71px 53px, 107px 89px;
  background-position: 14px 18px, 32px 5px, 8px 40px;
  mask-image: radial-gradient(ellipse at var(--relic-x) var(--relic-y), #000 0%, #0003 36%, transparent 65%);
}
.mha-relic-edition { position: absolute; top: 16%; left: 22%; right: 22%; font: 400 2.4cqw/1.4 'IM Fell English SC', Georgia, serif; letter-spacing: .14em; color: #f5d98f; text-shadow: 0 1px 4px #200a11; }
.mha-relic-edition span { display: inline-block; margin: 0 .6em; font-size: .8em; }
.mha-relic-name { position: absolute; top: 68%; left: 13%; right: 13%; display: flex; flex-direction: column; align-items: center; color: #fff0c2; text-shadow: 0 2px 9px #210514; }
.mha-relic-name > span { font: 400 5.7cqw/.95 'IM Fell English', Georgia, serif; }
.mha-relic-name > strong { font: 400 10.4cqw/1.08 'IM Fell English SC', Georgia, serif; letter-spacing: .035em; }
.mha-relic-name > small { margin-top: 6px; font: 400 2.4cqw/1.3 'Manrope', sans-serif; letter-spacing: .09em; color: #e4bc76; }
.mha-relic-seal { position: absolute; bottom: 6%; left: 42%; right: 42%; font: 400 7cqw/1 Georgia, serif; color: #f5d493; text-shadow: 0 0 9px #ffdaa08c; }
.mha-relic-back-pattern { position: absolute; inset: 0; background: radial-gradient(circle at 50% 41%, transparent 31%, #d1a26214 31.2%, transparent 31.6%, transparent 39%, #d1a26229 39.2%, transparent 39.6%, transparent 40.5%, #d1a26215 40.7%, transparent 41%), radial-gradient(ellipse at 50% 15%, #8b3a4a, #4a1028 55%, #2b071a); }
.mha-relic-equation { position: absolute; top: 10%; left: 25%; right: 25%; font: italic 400 7cqw/1.2 'IM Fell English', Georgia, serif; color: #efd28f; text-shadow: 0 0 15px #d69b6470; }
.mha-relic-biography { position: absolute; top: 23%; left: 10%; right: 10%; display: flex; flex-direction: column; align-items: center; }
.mha-relic-back-name { color: #fff0c2; font: 400 max(21px, 7cqw)/1.15 'IM Fell English', Georgia, serif; }
.mha-relic-lifetime { margin-top: 4px; font: 400 max(10px, 2.7cqw)/1.4 'Manrope', sans-serif; color: #d6b39f; }
.mha-relic-rule { display: flex; align-items: center; width: 68%; gap: 11px; margin: 2.5cqw 0 2cqw; color: #d2a75c; font-size: 2.8cqw; }
.mha-relic-rule::before, .mha-relic-rule::after { content: ''; flex: 1; height: 1px; background: #d2a75c55; }
.mha-relic-fact { display: flex; flex-direction: column; gap: 3px; margin-bottom: 2.5cqw; }
.mha-relic-fact strong { color: #e9c57f; font: 400 max(12px, 3.6cqw)/1.2 'IM Fell English', Georgia, serif; }
.mha-relic-fact > span { color: #f2dfd3; font: 400 max(11px, 3.15cqw)/1.45 'Manrope', sans-serif; }
.mha-relic-gallery .mha-relic-caption p { margin: 0; }
.mha-relic-hint { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 12px; color: #edcf94; }
.mha-relic-hint > span:first-child { font: 400 25px/1 Georgia, serif; }
.mha-relic-material { display: block; margin-top: 11px; font: 400 10px/1.5 'Manrope', sans-serif; letter-spacing: .1em; color: #bb9296; }
.mha-relic-material b { margin: 0 .5em; font-weight: 400; color: #d1a36a; }
.mha-relic-gallery .mha-relic-credit { margin-top: 22px; font: 400 10px/1.5 'Manrope', sans-serif; color: #b9959a; }
.mha-relic-credit a { color: inherit; text-underline-offset: 3px; text-decoration-color: #b9959a70; }
.mha-relic-credit a:hover { color: #f5d493; }
.mha-relic-demo { margin: 0; min-width: 280px; background: #190b12; }
.mha-relic-demo .mha-relic-gallery { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; border: 0; }
.mha-relic-demo .mha-relic-gallery::before { inset: 18px; }
@media (max-width: 600px) {
  .mha-relic-gallery { padding: 29px 15px 24px; }
  .mha-relic-gallery .mha-relic-eyebrow { font-size: 8px; letter-spacing: .16em; }
  .mha-relic-space { width: min(100%, 360px); margin-top: 26px; }
  .mha-relic-gallery .mha-relic-intro p { font-size: 11px; }
  .mha-relic-demo .mha-relic-gallery { padding-inline: 25px; }
  .mha-relic-demo .mha-relic-gallery::before { inset: 10px; }
  .mha-relic-hint { font-size: 11px; }
  .mha-relic-material { font-size: 9px; letter-spacing: .025em; }
}
@container (max-width: 350px) {
  .mha-relic-gallery .mha-relic { aspect-ratio: .76; }
  .mha-relic-biography { top: 22%; }
  .mha-relic-rule { margin: 2cqw 0 1.5cqw; }
  .mha-relic-fact { margin-bottom: 2cqw; }
}
@media (max-width: 480px) {
  #mha-familienkarte .mha-relic-gallery { margin-inline: -12px; }
}
@media (prefers-reduced-motion: reduce) {
  .mha-relic-gallery .mha-relic { transform: none !important; transition: none !important; }
  .mha-relic-turn { transition: none; }
}
#mha-familienkarte[data-motion='off'] .mha-relic { transform: none !important; transition: none !important; }
#mha-familienkarte[data-motion='off'] .mha-relic-turn { transition: none; }
/* Match the app's ID-scoped resets without changing its other buttons. */
#mha-familienkarte .mha-relic { color: var(--relic-cream); transition: transform 180ms ease-out; }
#mha-familienkarte .mha-relic:active { transform: rotateX(var(--relic-rx, 0deg)) rotateY(var(--relic-ry, 0deg)); }
#mha-familienkarte .mha-relic:focus-visible { outline: 2px solid #fff0b1; outline-offset: 8px; }
#mha-familienkarte .mha-relic-intro h2 { margin: 9px 0 5px; font: 400 clamp(28px, 3vw, 38px)/1.2 'IM Fell English', Georgia, serif; }
#mha-familienkarte .mha-relic-credit { margin-top: 22px; }

/* One seamless ten-second cycle; the original portrait remains the source.
   These same browser animations are captured by the GIF export script. */
.mha-relic-portrait { animation: mha-relic-portrait-drift 10s ease-in-out infinite; transform-origin: 50% 48%; }
.mha-relic-foil { animation: mha-relic-holo-cycle 10s ease-in-out infinite; }
.mha-relic-inset::after { animation: mha-relic-gloss-cycle 10s ease-in-out infinite; }
.mha-relic-glitter { animation: mha-relic-dust-cycle 10s ease-in-out infinite; }
.mha-relic-motes { position: absolute; inset: 0; pointer-events: none; }
.mha-relic-motes > span { position: absolute; left: var(--mote-x); top: var(--mote-y); color: #fff5c5; font: 400 4cqw/1 Georgia, serif; text-shadow: 0 0 10px #ffce79; animation: mha-relic-mote-cycle 10s ease-in-out infinite; animation-delay: var(--mote-delay); }
@keyframes mha-relic-portrait-drift {
  0%, 100% { transform: translate(-.4%, .2%) scale(1.045) rotate(-.25deg); }
  50% { transform: translate(.55%, -.65%) scale(1.095) rotate(.3deg); }
}
@keyframes mha-relic-holo-cycle {
  0%, 100% { background-position: calc(var(--relic-x) - 30%) calc(var(--relic-y) - 15%); opacity: .35; }
  50% { background-position: calc(var(--relic-x) + 35%) calc(var(--relic-y) + 25%); opacity: .65; }
}
@keyframes mha-relic-gloss-cycle {
  0%, 100% { background-position: 120% center; opacity: 0; }
  15% { opacity: .8; }
  65% { background-position: -30% center; opacity: .8; }
  80% { background-position: -30% center; opacity: 0; }
}
@keyframes mha-relic-dust-cycle {
  0%, 100% { opacity: .35; transform: translateY(1px); }
  50% { opacity: .9; transform: translateY(-3px); }
}
@keyframes mha-relic-mote-cycle {
  0%, 25%, 100% { opacity: 0; transform: translateY(5px) scale(.4) rotate(0deg); }
  45% { opacity: .9; transform: translateY(0) scale(1) rotate(18deg); }
  68% { opacity: 0; transform: translateY(-8px) scale(.5) rotate(36deg); }
}
.mha-relic-gallery[data-paused='true'] :is(.mha-relic-portrait,.mha-relic-foil,.mha-relic-glitter,.mha-relic-motes > span),
.mha-relic-gallery[data-paused='true'] .mha-relic-inset::after,
.mha-relic[data-side='back'] .mha-relic-front :is(.mha-relic-portrait,.mha-relic-foil,.mha-relic-glitter,.mha-relic-motes > span),
.mha-relic[data-side='back'] .mha-relic-front .mha-relic-inset::after { animation-play-state: paused; }
.mha-relic-controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 5px 18px; margin-top: 16px; }
.mha-relic-gallery .mha-relic-controls :is(button,a) { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 0; background: none; border: 0; color: #dfc29a; font: 400 11px/1.4 'Manrope', sans-serif; text-decoration: underline; text-decoration-color: #dfc29a60; text-underline-offset: 4px; cursor: pointer; }
#mha-familienkarte .mha-relic-controls button { color: #dfc29a; font-size: 11px; }
.mha-relic-controls :is(button,a):focus-visible { outline: 2px solid #fff0b1; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .mha-relic-gallery :is(.mha-relic-portrait,.mha-relic-foil,.mha-relic-glitter,.mha-relic-motes > span), .mha-relic-gallery .mha-relic-inset::after { animation: none !important; }
  .mha-relic-motes, .mha-relic-gallery .mha-relic-controls [data-collectible-motion] { display: none; }
}
#mha-familienkarte[data-motion='off'] :is(.mha-relic-portrait,.mha-relic-foil,.mha-relic-glitter,.mha-relic-motes > span), #mha-familienkarte[data-motion='off'] .mha-relic-inset::after { animation: none !important; }
#mha-familienkarte[data-motion='off'] :is(.mha-relic-motes,[data-collectible-motion]) { display: none; }