/* Party Monsters editorial composition. The approved illustrations set the chapter rhythm;
   the real playfield and crops remain the geography reference. */
body.elvira{--party-gutter:max(40px,calc((100vw - 1240px)/2 + 40px))}

body.elvira .opening.cinematic{display:block;overflow:visible;background:var(--bg)}
body.elvira .opening.cinematic .art{display:block;width:100%;max-width:none;height:clamp(440px,68vh,720px);max-height:none;object-fit:cover;object-position:50% 27%;margin:0;-webkit-mask-image:linear-gradient(#000 44%,transparent 94%);mask-image:linear-gradient(#000 44%,transparent 94%)}
body.elvira .opening.cinematic .intro{position:relative;margin-top:-126px;padding:0 var(--party-gutter);background:none}
body.elvira .shortcut.act-map{background:none;border-left:0;border-right:0;border-bottom:0}

body.elvira #party-act-learn{margin-top:120px}
body.elvira #party-act-learn>a{width:100%;max-width:none;margin:0}
body.elvira #party-act-learn img{width:100%;height:clamp(440px,74vh,820px);object-fit:cover;object-position:50% 36%;-webkit-mask-image:linear-gradient(#000 58%,transparent 94%);mask-image:linear-gradient(#000 58%,transparent 94%)}
body.elvira #party-act-learn figcaption{position:relative;width:auto;max-width:none;margin:-104px 0 0;padding:0 var(--party-gutter);text-align:left}

body.elvira #party-act-plan,body.elvira #party-act-finish{display:grid;align-items:center;gap:0 clamp(32px,4vw,64px);margin-top:160px}
body.elvira #party-act-plan{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
body.elvira #party-act-finish{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
body.elvira #party-act-plan>a,body.elvira #party-act-finish>a{display:block;width:100%;max-width:none;margin:0;grid-row:1}
body.elvira #party-act-plan>a{grid-column:1}
body.elvira #party-act-finish>a{grid-column:2}
body.elvira #party-act-plan img,body.elvira #party-act-finish img{display:block;width:100%;height:clamp(420px,70vh,740px);object-fit:cover}
body.elvira #party-act-plan img{object-position:55% 42%}
body.elvira #party-act-finish img{object-position:50% 44%}
body.elvira #party-act-plan figcaption,body.elvira #party-act-finish figcaption{grid-row:1;width:auto;max-width:none;margin:0;padding:24px 0;text-align:left}
body.elvira #party-act-plan figcaption{grid-column:2;padding-right:var(--party-gutter)}
body.elvira #party-act-finish figcaption{grid-column:1;padding-left:var(--party-gutter)}
body.elvira #party-act-plan strong,body.elvira #party-act-finish strong{font-size:clamp(64px,7.6vw,112px)}
body.elvira .party-act-divider figcaption p{margin-left:0;margin-right:0}
body.elvira .party-act-divider .act-toc{justify-content:flex-start}

body.elvira #extra-play .visual-led{display:block}
body.elvira #extra-play .visual-copy{max-width:760px;margin:0 0 36px}
body.elvira #extra-play .visual-moment{position:relative;width:100vw;max-width:none;margin:44px 0 0 calc(50% - 50vw);border:0;background:none;box-shadow:none;overflow:hidden}
body.elvira #extra-play .visual-moment a{display:block}
body.elvira #extra-play .visual-moment img{display:block;width:100%;height:min(76vh,calc(100vw * .56));max-height:760px;object-fit:cover;object-position:50% 44%}
body.elvira #extra-play .visual-moment figcaption{position:absolute;inset:auto 0 0 auto;width:min(48%,620px);padding:90px var(--party-gutter) 42px 150px;background:linear-gradient(90deg,transparent,rgba(11,6,20,.94) 32%);font-size:17px;line-height:1.55}
body.elvira #extra-play .visual-moment figcaption strong{display:block;font-size:28px;line-height:1.15;margin-bottom:10px}

@media(max-width:900px){
  body.elvira .opening.cinematic .art{height:clamp(360px,58vh,500px);object-position:50% 27%}
  body.elvira .opening.cinematic .intro{margin-top:-92px;padding-inline:24px}
  body.elvira #party-act-learn img{height:clamp(320px,56vh,520px)}
  body.elvira #party-act-learn figcaption{margin-top:-72px}
  body.elvira #party-act-plan,body.elvira #party-act-finish{grid-template-columns:1fr;gap:0;margin-top:110px}
  body.elvira #party-act-plan>a,body.elvira #party-act-finish>a{grid-column:1;grid-row:1}
  body.elvira #party-act-plan figcaption,body.elvira #party-act-finish figcaption{grid-column:1;grid-row:2;padding:38px var(--party-gutter) 0}
  body.elvira #party-act-plan img,body.elvira #party-act-finish img{height:clamp(300px,52vh,480px)}
  body.elvira #extra-play .visual-moment{margin-top:30px}
  body.elvira #extra-play .visual-moment img{height:clamp(300px,68vw,470px)}
  body.elvira #extra-play .visual-moment figcaption{position:static;width:auto;padding:24px var(--party-gutter) 0;background:none}
}

@media print{
  body.elvira .opening.cinematic .art,body.elvira #party-act-learn img{mask-image:none;-webkit-mask-image:none}
  body.elvira #extra-play .visual-moment figcaption{position:static;background:none}
}
/* Both installed VPX tables use LA-4 rules but have different printed art. */
.party-playfield-versions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
  margin-top: 1.5rem;
}

.party-playfield-versions figure {
  margin: 0;
}

.party-playfield-versions img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
}

.party-playfield-versions figcaption {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.6rem;
}

@media (max-width: 720px) {
  .party-playfield-versions {
    grid-template-columns: 1fr;
  }
}

/* Feature clips use the same crop as the still and keep the control under it. */
body.elvira #party-act-learn>.backglass-motion.feature-motion,
body.elvira #party-act-plan>.backglass-motion.feature-motion,
body.elvira #party-act-finish>.backglass-motion.feature-motion,
body.elvira #extra-play .visual-moment>.backglass-motion.feature-motion{width:100%;max-width:none;margin:0}
body.elvira #party-act-plan>.backglass-motion.feature-motion{grid-column:1;grid-row:1}
body.elvira #party-act-finish>.backglass-motion.feature-motion{grid-column:2;grid-row:1}
body.elvira #party-act-learn .feature-motion img,
body.elvira #party-act-learn .feature-motion video{mask-image:none;-webkit-mask-image:none}
body.elvira #party-act-learn .feature-motion video{object-position:50% 36%}
body.elvira #party-act-plan .feature-motion video{object-position:55% 42%}
body.elvira #party-act-finish .feature-motion video,
body.elvira #extra-play .feature-motion video{object-position:50% 44%}
body.elvira #party-act-learn .feature-motion+figcaption{margin-top:1.25rem}
body.elvira #extra-play .visual-moment figcaption{bottom:5.5rem}
body.elvira .playfield-story-art>.backglass-motion.feature-motion{margin-bottom:.25rem}

@media(max-width:900px){
  body.elvira #party-act-plan>.backglass-motion.feature-motion,
  body.elvira #party-act-finish>.backglass-motion.feature-motion{grid-column:1;grid-row:1}
  body.elvira #party-act-learn .feature-motion+figcaption{margin-top:1rem}
  body.elvira #extra-play .visual-moment figcaption{position:static;bottom:auto;width:auto;padding:24px var(--party-gutter) 0;background:none}
}
