/* Individual portrait treatments for the two new royal collector cards. */
.character-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.character-emblem.emblem-roarzul,
.character-emblem.emblem-poppetta {
  background-size: 100% 100%, cover;
  background-position: center, center 22%;
  background-repeat: no-repeat;
}
.character-emblem.emblem-roarzul {
  background-image: linear-gradient(to bottom, rgba(16, 19, 22, .01) 35%, rgba(17, 18, 30, .54)), url('king-roarzul-v2.webp');
}
.character-emblem.emblem-poppetta {
  background-image: linear-gradient(to bottom, rgba(26, 18, 25, .02) 35%, rgba(17, 18, 30, .52)), url('queen-poppetta-v2.webp');
}
.character-dialog[data-character="roarzul"] { --dossier-accent: #dcb783; }
.character-dialog[data-character="poppetta"] { --dossier-accent: #d6b0bb; }
.character-dialog[data-character="roarzul"] .dossier-portrait,
.character-dialog[data-character="poppetta"] .dossier-portrait {
  background-size: cover;
  background-position: center 17%;
  background-repeat: no-repeat;
}
.character-dialog[data-character="roarzul"] .dossier-portrait { background-image: url('king-roarzul-v2.webp'); }
.character-dialog[data-character="poppetta"] .dossier-portrait { background-image: url('queen-poppetta-v2.webp'); }
/* Messy's own patchwork portrait replaces his cropped position in the ensemble art. */
.character-emblem.emblem-messy {
  background-image: linear-gradient(to bottom, rgba(18, 19, 27, .01) 35%, rgba(17, 18, 30, .47)), url('messy-v2.webp');
  background-size: 100% 100%, cover;
  background-position: center, center 27%;
  background-repeat: no-repeat;
}
.character-dialog[data-character="messy"] .dossier-portrait {
  background-image: url('messy-v2.webp');
  background-size: cover;
  background-position: center 14%;
  background-repeat: no-repeat;
}
/* Dedicated landscape gallery crops prevent tall character portraits from
   clipping heads in short, wide frames. Collector-card art stays full-length. */
.character-grid .character-emblem {
  background-image: linear-gradient(to bottom, rgba(17, 18, 30, .01) 45%, rgba(17, 18, 30, .34) 100%), var(--card-art);
  background-size: 100% 100%, cover;
  background-position: center, center center;
  background-repeat: no-repeat;
}
.character-grid .emblem-chris { --card-art: url('chris-manuscript-gallery.webp'); }
.character-grid .emblem-tippin { --card-art: url('tippin-manuscript-gallery.webp'); }
.character-grid .emblem-elowen { --card-art: url('elowen-manuscript-gallery.webp'); }
.character-grid .emblem-messy { --card-art: url('card-messy-centered.webp'); }
.character-grid .emblem-gloom { --card-art: url('card-gloom-manuscript.webp'); }
.character-grid .emblem-roarzul { --card-art: url('card-roarzul-centered.webp'); }
.character-grid .emblem-poppetta { --card-art: url('card-poppetta-centered.webp'); }
.character-dialog[data-character="christopher"] .dossier-portrait,
.character-dialog[data-character="tippin"] .dossier-portrait,
.character-dialog[data-character="elowen"] .dossier-portrait {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.character-dialog[data-character="christopher"] .dossier-portrait { background-image: url('chris-manuscript-full.webp'); }
.character-dialog[data-character="tippin"] .dossier-portrait { background-image: url('tippin-manuscript-full.webp'); }
.character-dialog[data-character="elowen"] .dossier-portrait { background-image: url('elowen-manuscript-full.webp'); }
.character-dialog[data-character="gloom"] .dossier-portrait {
  background-image: url('gloom-manuscript-full.webp');
  background-size: cover;
  background-position: center 10%;
  background-repeat: no-repeat;
}
@media (max-width: 1150px) { .character-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 780px) { .character-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }