/*
 * Design Duel — canonical composition.
 *
 * One artwork layer; editable WooCommerce/concept merchandise, VS, and
 * parchment remain real elements. Never embed text in the forest artwork.
 * The root owns its size; its named container governs only descendants.
 *
 * @since 0.12.1
 */
.vn2.vn2-design-duel {
  --vn-duel-ink:#071923;
  --vn-duel-gold:#ffdc8b;
  position:relative;
  isolation:isolate;
  container:design-duel / inline-size;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto;
  align-content:start;
  width:100%;
  height:auto;
  min-width:0;
  min-height:0;
  aspect-ratio:auto;
  gap:clamp(.55rem,1.2vw,.95rem);
  padding:3% 3.7% 3.7%;
  border:1px solid #37504f;
  outline:0;
  box-shadow:none;
  overflow:hidden;
  background:#061821;
}
.vn2.vn2-design-duel .vn2-design-duel__art {
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:#061821;
}
.vn2.vn2-design-duel .vn2-design-duel__art > img {
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:var(--vn2-media-fit,cover)!important;
  object-position:var(--vn2-focal-x,50%) var(--vn2-focal-y,50%)!important;
  filter:brightness(var(--vn2-art-shade,1));
}
/*
 * The bundled 1536×1024 forest scene contains an unused top band after
 * cover-cropping into the wide duel panel. Extend the image beneath the
 * panel's upper border while anchoring the characters at the bottom.
 * Custom media must not inherit this art-directed overscan.
 */
.vn2.vn2-design-duel .vn2-design-duel__art:not(.vn2-artwork--custom) > img {
  transform:scale(1.10);
  transform-origin:50% 100%;
}

.vn2.vn2-design-duel .vn2-design-duel__art::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#0310182b,transparent 30% 74%,#03101830);
}
.vn2.vn2-design-duel .vn2-design-duel__arena {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:minmax(0,1fr);
  column-gap:6cqw;
  width:100%;
  height:36cqw;
  min-width:0;
  min-height:0;
  margin:0;
  padding:0 3.5cqw;
  background:none;
  overflow:visible;
}
.vn2.vn2-design-duel .vn2-design-duel__fighter {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) auto;
  align-self:stretch;
  justify-self:stretch;
  min-width:0;
  min-height:0;
  height:100%;
  border:0;
  background:transparent;
}
.vn2.vn2-design-duel .vn2-design-duel__image,
.vn2.vn2-design-duel .vn2-design-duel__image--preview {
  display:grid;
  grid-column:1;
  grid-row:1;
  place-items:center;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  max-height:none;
  margin:0;
  padding:0;
  aspect-ratio:auto;
  overflow:hidden;
  border:0;
  background:transparent;
}
.vn2.vn2-design-duel .vn2-design-duel__image > img,
.vn2.vn2-design-duel .vn2-design-duel__image--preview > img {
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  object-fit:contain!important;
  object-position:50% 50%!important;
  transform:none;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  mix-blend-mode:normal!important;
  filter:drop-shadow(0 .3rem .3rem #0210199a);
  transition:transform .18s ease;
}
.vn2.vn2-design-duel .vn2-design-duel__image--photo {background:#eee9df}
.vn2.vn2-design-duel .vn2-design-duel__image--photo > img {filter:none}
.vn2.vn2-design-duel .vn2-design-duel__fighter .vn2-design-duel__details {
  position:relative;
  z-index:2;
  grid-column:1;
  grid-row:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  align-content:center;
  align-items:center;
  justify-self:center;
  align-self:end;
  width:81%;
  min-width:0;
  height:auto;
  min-height:clamp(2.8rem,9.8cqw,6.2rem);
  margin:calc(-1 * .7cqw) 0 0;
  padding:clamp(.4rem,1.15cqw,.9rem) clamp(.5rem,1.3cqw,1.05rem);
  column-gap:clamp(.25rem,.9cqw,.7rem);
  row-gap:.12rem;
  border:1px solid #bc9a63;
  border-radius:0;
  outline:0;
  box-shadow:2px 3px 0 #021019,inset 0 0 0 1px #293d3c;
  background:#071b25f2;
}
.vn2.vn2-design-duel .vn2-design-duel__details h3 {
  grid-column:1;
  grid-row:1;
  min-width:0;
  margin:0;
  color:#fff2d7!important;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(.72rem,2.05cqw,1.55rem)!important;
  font-weight:700;
  line-height:1.15!important;
  overflow-wrap:anywhere;
  white-space:normal;
}
.vn2.vn2-design-duel .vn2-design-duel__bottom {display:contents}
.vn2.vn2-design-duel .vn2-design-duel__price {
  grid-column:1;
  grid-row:2;
  min-width:0;
  color:var(--vn-duel-gold);
  font:800 clamp(.66rem,1.9cqw,1.25rem)/1.1 "Noto Sans",sans-serif;
  overflow-wrap:anywhere;
}
.vn2.vn2-design-duel .vn2-design-duel__bottom .vn2-icon-action {
  grid-column:2;
  grid-row:1 / 3;
  display:grid;
  place-items:center;
  align-self:center;
  justify-self:end;
  width:clamp(1.45rem,5.3cqw,3.2rem);
  height:clamp(1.45rem,5.3cqw,3.2rem);
  min-width:0;
  margin:0;
  padding:0;
  border:1px solid #d1a95f;
  border-radius:0;
  background:#061821;
  box-shadow:inset 0 0 0 1px #142a30;
  color:var(--vn-duel-gold)!important;
  font-size:clamp(.75rem,2.1cqw,1.45rem);
  text-decoration:none;
}
.vn2.vn2-design-duel .vn2-design-duel__bottom .vn2-icon-action:hover {
  color:#fff4cf!important;
  background:#19332e;
}
.vn2.vn2-design-duel .vn2-icon-action--preview {
  pointer-events:none;
  cursor:default;
}
.vn2.vn2-design-duel .vn2-design-duel__versus {
  position:absolute;
  z-index:3;
  top:48%;
  left:50%;
  display:grid;
  place-items:center;
  width:auto;
  min-width:0;
  aspect-ratio:auto;
  margin:0;
  padding:0 .08em;
  transform:translate(-50%,-50%) rotate(-8deg);
  border:0;
  background:transparent;
  box-shadow:none;
  color:#ffdc84;
  font:italic 900 clamp(2rem,7.6cqw,5.5rem)/.95 Georgia,serif;
  letter-spacing:-.095em;
  text-shadow:2px 2px 0 #4f2e19,-1px -1px 0 #fff2bd,0 0 9px #e7ad4f9c;
  pointer-events:none;
}
.vn2.vn2-design-duel .vn2-design-duel__versus::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:-4.5cqw -5.4cqw;
  background:repeating-conic-gradient(from 3deg,#f9ce748a 0deg 1.25deg,transparent 1.25deg 17deg);
  -webkit-mask-image:radial-gradient(transparent 0 22%,#000 39% 69%,transparent 82%);
  mask-image:radial-gradient(transparent 0 22%,#000 39% 69%,transparent 82%);
  opacity:.94;
  pointer-events:none;
}
.vn2.vn2-design-duel .vn2-design-duel__prompt {
  position:relative;
  z-index:2;
  isolation:isolate;
  grid-column:1;
  justify-self:center;
  align-self:start;
  box-sizing:border-box;
  width:57%;
  max-width:none;
  min-width:0;
  height:auto;
  margin:clamp(.5rem,1.8cqw,1.15rem) auto .15rem;
  padding:clamp(.65rem,1.65cqw,1.2rem) clamp(1rem,2.2cqw,2rem);
  border:0;
  outline:0;
  background:transparent;
  color:#241b15;
  font:700 clamp(.7rem,1.85cqw,1.3rem)/1.35 ui-monospace,monospace;
  text-align:center;
  letter-spacing:.01em;
  text-wrap:balance;
  overflow-wrap:break-word;
  filter:drop-shadow(3px 4px 0 #03151b);
}
.vn2.vn2-design-duel .vn2-design-duel__prompt::before,
.vn2.vn2-design-duel .vn2-design-duel__prompt::after {
  content:"";
  position:absolute;
  pointer-events:none;
  clip-path:polygon(7% 0,93% 0,93% 7%,96% 7%,96% 20%,98% 20%,98% 35%,100% 35%,100% 66%,98% 66%,98% 83%,96% 83%,96% 93%,93% 93%,93% 100%,7% 100%,7% 93%,4% 93%,4% 83%,2% 83%,2% 67%,0 67%,0 35%,2% 35%,2% 19%,4% 19%,4% 7%,7% 7%);
}
.vn2.vn2-design-duel .vn2-design-duel__prompt::before {
  z-index:-2;
  inset:-.42cqw -1.45cqw;
  background:#584532;
}
.vn2.vn2-design-duel .vn2-design-duel__prompt::after {
  z-index:-1;
  inset:-.25cqw -1.2cqw;
  background:linear-gradient(180deg,#fff0d0,#efddb9);
}
.vn2.vn2-design-duel--solo .vn2-design-duel__arena {
  grid-template-columns:minmax(0,1fr);
  height:33cqw;
}
.vn2.vn2-design-duel--solo .vn2-design-duel__fighter {
  width:55%;
  justify-self:center;
}
.vn2.vn2-design-duel :is(.vn2-design-duel__image,.vn2-icon-action):focus-visible {
  outline:2px solid #ffe5af;
  outline-offset:3px;
}

/*
 * Restore the image editor's independent mobile focal settings.
 * Custom artwork and the bundled forest use the same media behavior.
 */
@media (max-width:600px) {
  .vn2.vn2-design-duel .vn2-design-duel__art > img {
    object-position:var(--vn2-mobile-focal-x,var(--vn2-focal-x,50%)) var(--vn2-mobile-focal-y,var(--vn2-focal-y,50%))!important;
  }
}

/* Mobile and narrower columns: readable horizontal fighters with a dedicated VS row. */
@container design-duel (max-width:480px) {
  .vn2.vn2-design-duel .vn2-design-duel__arena,
  .vn2.vn2-design-duel--solo .vn2-design-duel__arena {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto auto;
    grid-template-areas:"first" "versus" "second";
    gap:.4rem;
    height:auto;
    min-height:0;
    margin:0;
    padding:0;
  }
  .vn2.vn2-design-duel .vn2-design-duel__fighter,
  .vn2.vn2-design-duel--solo .vn2-design-duel__fighter {
    grid-template-columns:minmax(0,36%) minmax(0,64%);
    grid-template-rows:minmax(6rem,auto);
    justify-self:stretch;
    width:100%;
    height:auto;
    min-height:6rem;
    border:1px solid #927648;
    background:#071923e8;
  }
  .vn2.vn2-design-duel:not(.vn2-design-duel--solo) .vn2-design-duel__fighter:first-child {grid-area:first}
  .vn2.vn2-design-duel:not(.vn2-design-duel--solo) .vn2-design-duel__fighter:nth-child(2) {
    grid-area:second;
    grid-template-columns:minmax(0,64%) minmax(0,36%);
  }
  .vn2.vn2-design-duel .vn2-design-duel__image,
  .vn2.vn2-design-duel .vn2-design-duel__image--preview {
    grid-column:1;
    grid-row:1;
    height:100%;
    min-height:0;
    max-height:10rem;
  }
  .vn2.vn2-design-duel:not(.vn2-design-duel--solo) .vn2-design-duel__fighter:nth-child(2) .vn2-design-duel__image {
    grid-column:2;
  }
  .vn2.vn2-design-duel .vn2-design-duel__fighter .vn2-design-duel__details {
    grid-column:2;
    grid-row:1;
    justify-self:stretch;
    align-self:stretch;
    width:100%;
    height:auto;
    min-height:0;
    margin:0;
    padding:clamp(.35rem,2.3cqw,.6rem);
    border:0;
    border-left:1px solid #ad8c5e;
    box-shadow:none;
  }
  .vn2.vn2-design-duel:not(.vn2-design-duel--solo) .vn2-design-duel__fighter:nth-child(2) .vn2-design-duel__details {
    grid-column:1;
    border:0;
    border-right:1px solid #ad8c5e;
  }
  .vn2.vn2-design-duel .vn2-design-duel__details h3 {font-size:clamp(.78rem,3.7cqw,1.12rem)!important}
  .vn2.vn2-design-duel .vn2-design-duel__price {font-size:clamp(.7rem,3.3cqw,.92rem)}
  .vn2.vn2-design-duel .vn2-design-duel__bottom .vn2-icon-action {
    width:clamp(1.4rem,6.5cqw,2rem);
    height:clamp(1.4rem,6.5cqw,2rem);
    font-size:clamp(.72rem,3.5cqw,1rem);
  }
  .vn2.vn2-design-duel .vn2-design-duel__versus {
    position:relative;
    grid-area:versus;
    inset:auto;
    justify-self:center;
    transform:rotate(-8deg);
    font-size:clamp(1.4rem,8cqw,2rem);
    line-height:1;
    margin:0;
  }
  .vn2.vn2-design-duel .vn2-design-duel__versus::before {inset:-.7em -1em}
  .vn2.vn2-design-duel .vn2-design-duel__prompt {
    width:calc(100% - 1.2rem);
    max-width:25rem;
    margin:.85rem auto .3rem;
    padding:.7rem .6rem;
    font-size:clamp(.75rem,3.7cqw,.95rem);
    line-height:1.35;
  }
  .vn2.vn2-design-duel .vn2-design-duel__prompt::before {inset:-.22rem -.55rem}
  .vn2.vn2-design-duel .vn2-design-duel__prompt::after {inset:-.1rem -.4rem}
  .vn2.vn2-design-duel--solo .vn2-design-duel__arena {
    grid-template-areas:"first";
    grid-template-rows:auto;
  }
  .vn2.vn2-design-duel--solo .vn2-design-duel__fighter {width:100%}
}

/* Third/quarter-column: shirt above a full-width inventory plate. */
@container design-duel (max-width:180px) {
  .vn2.vn2-design-duel .vn2-design-duel__fighter,
  .vn2.vn2-design-duel:not(.vn2-design-duel--solo) .vn2-design-duel__fighter:nth-child(2) {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto;
    min-height:0;
  }
  .vn2.vn2-design-duel .vn2-design-duel__image,
  .vn2.vn2-design-duel .vn2-design-duel__image--preview,
  .vn2.vn2-design-duel:not(.vn2-design-duel--solo) .vn2-design-duel__fighter:nth-child(2) .vn2-design-duel__image {
    grid-column:1;
    grid-row:1;
    height:64cqw;
    min-height:4.5rem;
    max-height:8rem;
  }
  .vn2.vn2-design-duel .vn2-design-duel__fighter .vn2-design-duel__details,
  .vn2.vn2-design-duel:not(.vn2-design-duel--solo) .vn2-design-duel__fighter:nth-child(2) .vn2-design-duel__details {
    grid-column:1;
    grid-row:2;
    width:100%;
    min-height:3.5rem;
    border:0;
    border-top:1px solid #ad8c5e;
    padding:.35rem;
  }
  .vn2.vn2-design-duel .vn2-design-duel__details h3 {font-size:clamp(.68rem,5.2cqw,.83rem)!important}
  .vn2.vn2-design-duel .vn2-design-duel__price {font-size:clamp(.58rem,4.5cqw,.73rem)}
  .vn2.vn2-design-duel .vn2-design-duel__bottom .vn2-icon-action {
    width:clamp(1.15rem,9cqw,1.5rem);
    height:clamp(1.15rem,9cqw,1.5rem);
  }
  .vn2.vn2-design-duel .vn2-design-duel__prompt {
    width:calc(100% - .8rem);
    padding:.75rem .35rem;
    font-size:clamp(.58rem,4.8cqw,.72rem);
  }
}

@media (prefers-reduced-motion:reduce) {
  .vn2.vn2-design-duel .vn2-design-duel__image > img {transition:none}
}