/* Better Than Balance cover art (Oct 12, 2026 preview): dark botanical apple behind a dark translucent panel.
   Cover only; loaded by index.html only. Shared quiz.css is unchanged. */
.screen--cover.cover--art {
  background-color: #1B1A18;
  background-image: url("../img/btb-cover-apple.jpg");
  background-image: image-set(url("../img/btb-cover-apple.webp") type("image/webp"), url("../img/btb-cover-apple.jpg") type("image/jpeg"));
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.cover--art .cover__inner { background: rgba(28, 25, 23, 0.88); padding: 36px 24px 30px; margin: auto 0; max-width: 520px; }
.cover--art .footer--light { background: rgba(28, 25, 23, 0.88); padding: 10px 14px; }
@media (min-width: 900px) {
  /* Desktop (Dr. Daryl, Oct 12): everything centered. The painting flanks a centered panel on both sides. */
  .screen--cover.cover--art {
    background-image: url("../img/btb-cover-apple.jpg"), url("../img/btb-cover-apple.jpg");
    background-image: image-set(url("../img/btb-cover-apple.webp") type("image/webp"), url("../img/btb-cover-apple.jpg") type("image/jpeg")), image-set(url("../img/btb-cover-apple.webp") type("image/webp"), url("../img/btb-cover-apple.jpg") type("image/jpeg"));
    background-size: auto 100%, auto 100%; background-position: left center, right center; background-repeat: no-repeat, no-repeat;
  }
  .cover--art .cover__inner { align-self: center; margin: auto; }
  .cover--art .footer--light { align-self: center; max-width: 520px; width: 100%; }
  .card, .lead__inner, .result__inner { margin-left: auto; margin-right: auto; text-align: center; }
  .result__body, .result__confirm, .lead__line, .smallprint { text-align: center; }
}
/* The shared taupe button is 2.97:1 with ivory text; on this cover use the deep taupe (AA). */
.cover--art .btn { background: var(--taupe-deep); }
.cover--art .btn:active { background: var(--espresso); }
@media (hover: hover) { .cover--art .btn:hover { background: var(--espresso); } }