/* Playhouse 1.10.0 — new filename bypasses persistent upstream asset CDN cache. */
/* Playhouse v1.8: uploaded images in feature cards. The text stays visible. */
.mm-play-feature-battle { isolation:isolate; }
.mm-play-feature-battle .mm-battle-art {
  position:absolute;inset:0 0 0 auto;width:68%;height:100%;z-index:-2;
  display:block;overflow:hidden;pointer-events:none;
}
.mm-play-feature-battle .mm-battle-art img {
  width:100%;height:100%;display:block;object-fit:cover;object-position:center;
}
.mm-play-feature-battle:has(.mm-battle-art):before {
  background:linear-gradient(90deg,rgba(42,30,52,.96) 0%,rgba(42,30,52,.83) 38%,rgba(42,30,52,.29) 100%);
}
.mm-play-feature-battle:has(.mm-battle-art) .mm-battle-vs {opacity:.66;font-size:64px;}
.mm-play-feature-craft .mm-craft-art {pointer-events:none;}
.mm-play-feature-battle > .mm-kicker,.mm-play-feature-battle > strong,.mm-play-feature-battle > span:not(.mm-battle-art):not(.mm-battle-vs),.mm-play-feature-battle > b {position:relative;z-index:1;}
@media(max-width:620px) {
  .mm-play-feature-battle .mm-battle-art{width:78%}
  .mm-play-feature-battle:has(.mm-battle-art):before {background:linear-gradient(90deg,rgba(42,30,52,.97),rgba(42,30,52,.73) 58%,rgba(42,30,52,.37))}
}

/* The optional legacy/Gutenberg two-card block may receive its Battle card from
   a plugin hook, so the image is applied to its second card when configured. */
.mm-playhouse-battle-image-grid[style*="--mm-upload-battle"] > a:nth-child(2) {
  background-image:linear-gradient(90deg,rgba(42,30,52,.95),rgba(42,30,52,.44)),var(--mm-upload-battle);
  background-position:center;
  background-size:cover;
}

/* Playhouse v1.9 — remove the hard vertical edge from the Meme Craft art.
   Uploaded images were constrained to a 63% strip even though the artwork is
   already composed for a text-safe left side. Make the picture full bleed and
   use a smooth ink-to-picture gradient like the Battles card instead. */
.mm-play-feature-craft,
.mm-meme-feature-card:has(> .mm-craft-art) {
  isolation:isolate;
  background:#2a1e34;
}
.mm-play-feature-craft > .mm-craft-art,
.mm-meme-feature-card > .mm-craft-art {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  overflow:hidden;
  z-index:-2;
  pointer-events:none;
}
.mm-play-feature-craft > .mm-craft-art img,
.mm-meme-feature-card > .mm-craft-art img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.mm-play-feature-craft::before,
.mm-meme-feature-card:has(> .mm-craft-art)::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(42,30,52,.98) 0%,
    rgba(42,30,52,.95) 18%,
    rgba(42,30,52,.82) 38%,
    rgba(42,30,52,.38) 64%,
    rgba(42,30,52,.04) 100%);
}
@media(max-width:620px) {
  .mm-play-feature-craft > .mm-craft-art,
  .mm-meme-feature-card > .mm-craft-art {width:100%;}
  .mm-play-feature-craft::before,
  .mm-meme-feature-card:has(> .mm-craft-art)::before {
    background:linear-gradient(90deg,
      rgba(42,30,52,.98) 0%,
      rgba(42,30,52,.88) 33%,
      rgba(42,30,52,.56) 58%,
      rgba(42,30,52,.06) 100%);
  }
}