/* Exact raster sources are never tinted, blended or stretched. */
[data-finish="skates"] { --pop-art: url('/assets/resident-card/backgrounds/skates-v2.png'); --pop-base: #f43394; --pop-reading: #f43394f2; --pop-panel: #ffa8d0; --pop-header: #26c2e0; }
[data-finish="boombox"] { --pop-art: url('/assets/resident-card/backgrounds/boombox-v3.png'); --pop-base: #ff694c; --pop-reading: #ff694cf2; --pop-panel: #ffbca5; --pop-header: #26c2e0; }
[data-finish="computer"] { --pop-art: url('/assets/resident-card/backgrounds/computer.png'); --pop-base: #0ab9dc; --pop-reading: #0ab9dcf2; --pop-panel: #b9edf7; --pop-header: #f254a9; }
/* Three approved originals; existing seven finishes are not restyled. */
.mo-mirror-mount #moCard:is([data-finish="skates"],[data-finish="boombox"],[data-finish="computer"]) { container-type: inline-size; }
.mo-mirror-mount #moCard:is([data-finish="skates"],[data-finish="boombox"],[data-finish="computer"])::before {
  background: var(--pop-base) var(--pop-art) center / cover no-repeat;
  opacity: 1;
  mix-blend-mode: normal;
}
.mo-mirror-mount #moCard:is([data-finish="skates"],[data-finish="boombox"],[data-finish="computer"]) > div:first-child {
  left: 1.5%; right: 1.5%; top: 1.5%; padding: 2% 4%;
  background: var(--pop-header);
  border-bottom: 2px solid #24112e;
  color: #24112e !important;
}
.mo-mirror-mount #moCard:is([data-finish="skates"],[data-finish="boombox"],[data-finish="computer"])::after {
  content: ''; position: absolute; z-index: 1;
  left: 16%; top: 29%; width: 46%; height: 56%;
  background: var(--pop-reading);
}
.mo-mirror-mount #moCard:is([data-finish="skates"],[data-finish="boombox"],[data-finish="computer"]) #moAvatar {
  background: var(--pop-panel) !important;
  border: 2px solid #24112e !important;
  box-sizing: border-box;
}
.mo-mirror-mount #moCard:is([data-finish="skates"],[data-finish="boombox"],[data-finish="computer"]) #moName { left: 18%; top: 31%; width: 43%; font-size: 5.7cqw !important; }
.mo-mirror-mount #moCard:is([data-finish="skates"],[data-finish="boombox"],[data-finish="computer"]) #moHandle { left: 18%; top: 43%; width: 43%; font-size: max(12px, 2.7cqw) !important; }
.mo-mirror-mount #moCard:is([data-finish="skates"],[data-finish="boombox"],[data-finish="computer"]) #moHandle + div { left: 18%; top: 52%; width: 43%; font-size: max(12px, 2.6cqw) !important; line-height: 1.2 !important; }
.mo-mirror-mount #moCard:is([data-finish="skates"],[data-finish="boombox"],[data-finish="computer"]) #moName,
.mo-mirror-mount #moCard:is([data-finish="skates"],[data-finish="boombox"],[data-finish="computer"]) #moHandle,
.mo-mirror-mount #moCard:is([data-finish="skates"],[data-finish="boombox"],[data-finish="computer"]) #moHandle + div,
.mo-mirror-mount #moCard:is([data-finish="skates"],[data-finish="boombox"],[data-finish="computer"]) #moHandle + div strong,
.mo-mirror-mount #moCard:is([data-finish="skates"],[data-finish="boombox"],[data-finish="computer"]) #moResidentNo { color: #24112e !important; text-shadow: none; }
.mo-mirror-mount #moCard:is([data-finish="skates"],[data-finish="boombox"],[data-finish="computer"]) .mo-card-ai { font-size: 1em; line-height: inherit; vertical-align: baseline; }
@media (max-width: 700px) {
  /* Five 12px detail rows must remain on the reading surface at 320px too. */
  .mo-mirror-mount #moCard:is([data-finish="skates"],[data-finish="boombox"],[data-finish="computer"])::after { height: 68%; }
  .mo-room__canvas:has(#moCard:is([data-finish="skates"],[data-finish="boombox"],[data-finish="computer"])) {
    width: calc(100% - 24px); aspect-ratio: 1681 / 936; margin: 20px auto;
  }
  .mo-room__canvas:has(#moCard:is([data-finish="skates"],[data-finish="boombox"],[data-finish="computer"])) .mo-room__backdrop { display: none; }
  .mo-room__canvas:has(#moCard:is([data-finish="skates"],[data-finish="boombox"],[data-finish="computer"])) .mo-mirror-mount {
    left: 0; top: 0; width: 100%; height: 100%;
  }
  .mo-mirror-mount #moCard:is([data-finish="skates"],[data-finish="boombox"],[data-finish="computer"]) > div:first-child { font-size: 2.8cqw !important; }
}
.closet-page .card-face:is([data-finish="skates"],[data-finish="boombox"],[data-finish="computer"]) {
  background-size: contain !important;
  background-color: var(--pop-base) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: #24112e;
  padding-bottom: 64px;
}
.closet-page .card-face:is([data-finish="skates"],[data-finish="boombox"],[data-finish="computer"]) .card-flip-toggle { top: auto; bottom: 12px; }
.closet-page .card-face:is([data-finish="skates"],[data-finish="boombox"],[data-finish="computer"]) .card-corner-header {
  background: var(--pop-header); color: #24112e;
  padding: 12px 16px; border-bottom: 2px solid #24112e;
}
.closet-page .card-face:is([data-finish="skates"],[data-finish="boombox"],[data-finish="computer"]) .card-info,
.closet-page .card-face:is([data-finish="skates"],[data-finish="boombox"],[data-finish="computer"]) .card-back-body {
  padding: 16px; background: var(--pop-panel); color: #24112e;
}
.closet-page .card-face:is([data-finish="skates"],[data-finish="boombox"],[data-finish="computer"]) .card-avatar {
  background: var(--pop-panel); border-color: #24112e;
}
.closet-page .card-face:is([data-finish="skates"],[data-finish="boombox"],[data-finish="computer"]) .card-name,
.closet-page .card-face:is([data-finish="skates"],[data-finish="boombox"],[data-finish="computer"]) .card-archetype,
.closet-page .card-face:is([data-finish="skates"],[data-finish="boombox"],[data-finish="computer"]) .resident-no,
.closet-page .card-face:is([data-finish="skates"],[data-finish="boombox"],[data-finish="computer"]) .card-fact {
  color: #24112e;
}