@font-face {
  font-family: 'Match WenKai';
  src: url('https://sgcdn.gxqlove.top/zhimajiangjun/static-20261103-9e2f00eadfcd/assets/fonts/library-wenkai-v1.woff2') format('woff2');
  font-display: swap;
}
:root { --portrait-stage-width: min(100vw, calc(100svh * 941 / 1672), 543px); }
.preview { width: var(--portrait-stage-width); }

/* The two banner rows share a 1280px source. The blue row starts 370px
   below the red row when their parchment interiors are registered. */
:is(.match-transition, .preview) {
  --match-card-distance: clamp(108px, 23svh, 245px);
  container-type: inline-size;
}
:is(.match-transition__profile, .profile) {
  width: 88%;
  max-width: 460px;
  aspect-ratio: 3.38 / 1;
  left: 50%;
  bottom: auto;
  container-type: inline-size;
  --match-copy-inset: 31.5%;
  --match-copy-width: 42%;
}
:is(.match-transition__profile--opponent, .profile.opponent) {
  top: calc(50% - var(--match-card-distance));
  transform: translate3d(-50%, calc(-65% - 125dvh), 0);
}
:is(.match-transition__profile--player, .profile.player) {
  top: calc(50% + var(--match-card-distance));
  transform: translate3d(-50%, calc(-65% + 125dvh), 0);
}
:is(.match-transition__profile--player .match-transition__profile-art, .player .profile-art)::before {
  background-position: center -28.90625cqw;
}
:is(.match-transition__profile--player .match-transition__profile-art, .player .profile-art) {
  /* Omit the last red cloth pixels immediately above the blue source row. */
  clip-path: inset(5% 0 0);
}
:is(.match-transition__copy, .copy) {
  position: absolute;
  top: 44%;
  width: var(--match-copy-width);
  height: 42%;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1.1cqw;
  padding: 0;
  text-align: center;
  font-family: 'Match WenKai', 'Kaiti SC', STKaiti, KaiTi, serif;
}
:is(.match-transition__profile--opponent .match-transition__copy, .opponent .copy) {
  left: var(--match-copy-inset);
  right: auto;
  text-align: center;
}
:is(.match-transition__profile--player .match-transition__copy, .player .copy) {
  right: var(--match-copy-inset);
  left: auto;
  /* The blue banner's visible parchment center sits lower in the source sheet. */
  top: calc(44% + 1.2cqw);
  text-align: center;
}
:is(.match-transition__copy, .copy) b {
  font-family: inherit;
  font-size: 4.7cqw;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.15;
}
:is(.match-transition__profile--opponent .match-transition__meta,
    .match-transition__profile--player .match-transition__meta,
    .opponent .meta, .player .meta) {
  justify-content: center;
  gap: .85cqw;
  line-height: 1.2;
  white-space: nowrap;
}
:is(.match-transition__copy, .copy) em,
:is(.match-transition__meta, .meta) i {
  font-family: inherit;
  font-size: 3.1cqw;
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
}
:is(.match-transition__meta, .meta) i {
  color: #705033;
}
:is(.match-transition.is-active, .preview.is-active) :is(.match-transition__profile--opponent, .profile.opponent) {
  animation: match-card-arrive-top 610ms 240ms cubic-bezier(.16, 1, .3, 1) forwards;
}
:is(.match-transition.is-active, .preview.is-active) :is(.match-transition__profile--player, .profile.player) {
  animation: match-card-arrive-bottom 610ms 240ms cubic-bezier(.16, 1, .3, 1) forwards;
}
.preview.is-hold .profile {
  opacity: 1;
  transform: translate3d(-50%, -65%, 0);
}
.preview.is-leaving .profile { animation: profile-out 150ms ease-out forwards; }
@keyframes match-card-arrive-top {
  to { opacity: 1; transform: translate3d(-50%, -65%, 0); }
}
@keyframes match-card-arrive-bottom {
  to { opacity: 1; transform: translate3d(-50%, -65%, 0); }
}

/* Complete badge + fire sprites use one locked sheet coordinate system. */
:is(.match-transition__vs, .vs) {
  width: min(43%, 220px);
  aspect-ratio: 1;
  isolation: isolate;
}
.match-vs-flame-frame {
  position: absolute;
  inset: 0;
  z-index: 3;
  background-image: url('https://sgcdn.gxqlove.top/zhimajiangjun/static-20261103-9e2f00eadfcd/assets/match-transition-vs-fire-v4/sheet-v2.png');
  background-size: 400% 400%;
  background-position: var(--frame-x) var(--frame-y);
  background-repeat: no-repeat;
  opacity: 0;
  mix-blend-mode: plus-lighter;
  /* Register the generated sheet's parchment centroids before blending. */
  transform: translate(var(--frame-offset-x, .5%), var(--frame-offset-y, 0%));
}
.match-vs-flame-frame:nth-of-type(1) { --frame-offset-x: -1.34%; --frame-offset-y: -.58%; }
.match-vs-flame-frame:nth-of-type(2) { --frame-offset-x: -.13%; --frame-offset-y: -.54%; }
.match-vs-flame-frame:nth-of-type(3) { --frame-offset-x: 1.58%; --frame-offset-y: -.59%; }
.match-vs-flame-frame:nth-of-type(4) { --frame-offset-x: 1.79%; --frame-offset-y: -.58%; }
.match-vs-flame-frame:nth-of-type(5) { --frame-offset-x: -1.29%; --frame-offset-y: .43%; }
.match-vs-flame-frame:nth-of-type(6) { --frame-offset-x: .1%; --frame-offset-y: .32%; }
.match-vs-flame-frame:nth-of-type(7) { --frame-offset-x: 1.81%; --frame-offset-y: .48%; }
.match-vs-flame-frame:nth-of-type(8) { --frame-offset-x: 2.23%; --frame-offset-y: .51%; }
.match-vs-flame-frame:nth-of-type(9) { --frame-offset-x: -1.65%; --frame-offset-y: 2.44%; }
.match-vs-flame-frame:nth-of-type(10) { --frame-offset-x: .57%; --frame-offset-y: 2.39%; }
.match-vs-flame-frame:nth-of-type(11) { --frame-offset-x: 1.54%; --frame-offset-y: 2.44%; }
.match-vs-flame-frame:nth-of-type(12) { --frame-offset-x: 1.7%; --frame-offset-y: 2.37%; }
.match-vs-flame-frame:nth-of-type(13) { --frame-offset-x: -1.28%; --frame-offset-y: 8.69%; }
.match-vs-flame-frame:nth-of-type(14) { --frame-offset-x: .25%; --frame-offset-y: 9.01%; }
.match-vs-flame-frame:nth-of-type(15) { --frame-offset-x: 1.68%; --frame-offset-y: 9.08%; }
.match-vs-flame-frame:nth-of-type(16) { --frame-offset-x: 1.76%; --frame-offset-y: 9.17%; }
:is(.is-active, .is-hold) .match-vs-flame-frame {
  animation: match-flame-blend 1600ms linear infinite;
  animation-delay: calc(var(--frame-index) * 100ms - 1600ms);
}
:is(.match-transition__vs-lettering, .vs .lettering) {
  inset: auto;
  left: 50%;
  top: 65.5%;
  width: 62%;
  height: 62%;
  padding: 0;
  transform: translate(-50%, -50%);
}
.match-transition.is-active .match-transition__vs,
.preview.is-active .vs,
.preview.is-hold .vs {
  animation-name: match-badge-arrive;
}
.preview.is-hold .vs { transform: translate3d(-50%, -65.5%, 0); }
@keyframes match-badge-arrive {
  to { opacity: 1; transform: translate3d(-50%, -65.5%, 0) scale(1); }
}
:is(.match-transition.is-leaving, .preview.is-leaving) :is(.match-transition__vs, .vs) {
  animation: match-badge-leave 160ms ease-out forwards;
}
@keyframes match-badge-leave {
  from { opacity: 1; transform: translate3d(-50%, -65.5%, 0) scale(1); }
  to { opacity: 0; transform: translate3d(-50%, -65.5%, 0) scale(.92); }
}
@keyframes match-flame-blend {
  0% { opacity: 1; }
  6.25%, 93.75% { opacity: 0; }
  100% { opacity: 1; }
}
@media (max-height: 560px) and (orientation: landscape) {
  :is(.match-transition, .preview) { --match-card-distance: 25svh; }
  :is(.match-transition__profile, .profile) { width: 68%; }
  :is(.match-transition__vs, .vs) { width: min(27%, 130px); }
}
@media (prefers-reduced-motion: reduce) {
  :is(.match-transition.is-active, .preview.is-active) :is(.match-transition__profile, .profile) {
    animation: none;
    opacity: 1;
    transform: translate3d(-50%, -65%, 0);
  }
  .match-vs-flame-frame { animation: none !important; }
  .match-vs-flame-frame:first-child { opacity: 1; }
}

/* 11.3 matching only: register portraits inside the authored medallion holes.
   The source is 1254px wide; its transparent holes are [141,113,360,328]
   and [892,493,1111,709]. The blue art row starts at 28.90625cqw.
   Keep the existing portrait contain rule, flag art, copy, and motion. */
#match-transition .match-transition__avatar {
  width: 17.6%;
  top: 8.8cqw;
}
#match-transition .match-transition__avatar--opponent { left: 11.175%; }
#match-transition .match-transition__avatar--player {
  right: 11.335%;
  top: 10.25cqw;
}