/* Transparent heads: the silhouette is the artwork, with no card or circle. */
.home-character-picker{max-width:580px}
.home-character-options{gap:10px}
.home-character,
.home-character.selected,
.cards .card[data-person],
.cards .card[data-person].selected{
  background:transparent;border:0;border-radius:0;box-shadow:none;
  padding:6px 2px 10px;overflow:visible;text-align:center;
}
.home-character::after,.home-character.selected::after,.cards .card[data-person]::after{display:none}
.character-head{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;margin:0 auto 8px;filter:drop-shadow(0 4px 2px #12384820)}
.home-character .character-head,.home-character .home-photo-head{max-width:112px}
.home-character .home-photo-head{margin-bottom:8px}
.home-character strong{font-size:14px;line-height:1.3}
.home-character.selected strong,.cards .card[data-person].selected strong{color:var(--teal);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px}
.home-character.selected strong::before,.cards .card[data-person].selected strong::before{content:'✓ ';font-weight:900}
.home-character.selected,.cards .card[data-person].selected{transform:none}
/* Colored contours follow the alpha silhouette rather than a rectangular image. */
.home-character.selected .character-head,
.cards .card[data-person].selected .character-head,
.home-character.selected .home-photo-head svg,
.cards .card[data-person].selected .empty-head svg{
  filter:drop-shadow(2px 0 0 var(--teal)) drop-shadow(-2px 0 0 var(--teal)) drop-shadow(0 2px 0 var(--teal)) drop-shadow(0 -2px 0 var(--teal)) drop-shadow(0 0 5px #e9bd5699);
}
@media(hover:hover){
  .home-character:not(.selected):hover .character-head,
  .cards .card[data-person]:not(.selected):hover .character-head,
  .home-character:not(.selected):hover .home-photo-head svg,
  .cards .card[data-person]:not(.selected):hover .empty-head svg{
    filter:drop-shadow(2px 0 0 var(--yellow)) drop-shadow(-2px 0 0 var(--yellow)) drop-shadow(0 2px 0 var(--yellow)) drop-shadow(0 -2px 0 var(--yellow)) drop-shadow(0 4px 3px #12384830);
  }
}
.home-character:focus-visible,.cards .card[data-person]:focus-visible{outline:3px solid var(--teal);outline-offset:4px;border-radius:8px}
.cards .card[data-person] .character-head{max-width:230px;margin-bottom:12px}
.cards .card[data-person] small{color:#52666d;font-size:14px}
.cards .custom-card .empty-head{max-width:120px}
@media(max-width:700px){
  .home-character-options{gap:8px 12px}
  .home-character .character-head,.home-character .home-photo-head{max-width:130px}
  .home-character strong{font-size:14px}
  .cards .card[data-person] .character-head{max-width:190px}
}
@media(prefers-reduced-motion:no-preference) and (hover:hover){
  .home-character:hover .character-head,.cards .card[data-person]:hover .character-head{transform:translateY(-3px)}
  .character-head{transition:transform .16s ease,filter .16s ease}
}