/* Approved quiz scenes, with live question/result text and controls preserved.
 * This file is intentionally quiz-only and must follow quiz-redesign.css.
 * The original cropped art is retained unchanged in the existing markup.
 */
body.quiz-redesign .qr-screen {
  --qr-scene: url('assets/quiz/question-scene.webp');
}

body.quiz-redesign .qr-world-0 {
  --qr-scene: url('assets/quiz/count-scene.webp');
  --qr-mobile-scene: url('assets/quiz/count-mobile.webp');
}

body.quiz-redesign .qr-world-1 {
  --qr-scene: url('assets/quiz/sunset-scene.webp');
  --qr-mobile-scene: url('assets/quiz/sunset-mobile.webp');
}

/* The approved navy / plum stone grain, without baked labels or icons.
 * 104% × 232% samples only the inner material of the two-panel source;
 * the existing live control supplies its own border, label and arrow.
 */
body.quiz-redesign .qr-result .qr-book-button {
  background-image: url('assets/quiz/button-materials.webp');
  background-size: 104% 232%;
  background-position: center 6%;
  background-repeat: no-repeat;
}

body.quiz-redesign .qr-result .qr-book-1 {
  background-position: center 94%;
}

/* The approved desktop interior continues behind the copy to the right edge.
 * A left-side vignette must not replace the wall, candles and tabletop.
 */
@media (min-width: 701px) {
  body.quiz-redesign .qr-screen .qr-art {
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--qr-scene) center center / cover no-repeat #080a0c;
  }

  body.quiz-redesign .qr-screen .qr-art svg {
    visibility: hidden;
  }

  /* Duplicate-hero guard: the new scene is never painted in the left 45.5%.
   * Both new scene cards end before 45% of their source width. With centred
   * `cover`, a point left of the centre can only move further left when cropped.
   * The old, opaque RGB art covers 48% of the screen, fully opaque through
   * 96% of that width (46.08% of the screen). The 45.5–46.08% overlap is opaque;
   * only the room continuation is blended between 46.08% and 48%.
   * Thus the source card and the new room card can never both be visible.
   */
  body.quiz-redesign .qr-result .qr-art {
    background: #080a0c;
  }

  body.quiz-redesign .qr-result .qr-art::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--qr-scene) center center / cover no-repeat;
    clip-path: inset(0 0 0 45.5%);
  }

  body.quiz-redesign .qr-result .qr-art svg {
    visibility: visible;
    position: absolute;
    inset: 0 auto 0 0;
    width: 48%;
    height: 100%;
    mask-image: linear-gradient(90deg, #000 96%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 96%, transparent 100%);
  }

  body.quiz-redesign .qr-screen .qr-art::after,
  body.quiz-redesign .qr-screen::before {
    background: none;
  }

  body.quiz-redesign .qr-question .qr-copy {
    width: min(55%, 860px);
    margin-right: 7%;
  }

  /* Reference-like soft shade: the room remains visible, including edge candles. */
  body.quiz-redesign .qr-result .qr-art::after {
    background: linear-gradient(90deg, transparent 40%, #08090b44 51%, #08090b99 66%, #08090b88 86%, #08090b22 100%);
  }

  body.quiz-redesign .qr-result h1 {
    font-size: clamp(46px, 4.9vw, 64px);
  }

  body.quiz-redesign .qr-result .qr-copy {
    width: min(44%, 720px);
    margin-right: 5%;
  }
}

/* Keep the approved narrow-screen question composition: no door hero.
 * The centre-right wall is a quiet continuous texture, not a black void.
 */
@media (max-width: 700px) {
  body.quiz-redesign #view {
    min-height: calc(100svh - 56px);
  }

  body.quiz-redesign .qr-question .qr-art {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--qr-scene) 71% top / auto 100% no-repeat #080a0c;
  }

  body.quiz-redesign .qr-question .qr-art svg {
    visibility: hidden;
  }

  body.quiz-redesign .qr-question .qr-art::after {
    background: linear-gradient(180deg, #080a0c55, #080a0c99);
  }

  body.quiz-redesign .qr-question::before {
    background: none;
  }

  /* 270px at the 390px review width, rather than the former 390px hero.
   * Separate mobile crops keep the complete key / crescent card in view.
   */
  body.quiz-redesign .qr-result .qr-art {
    width: 100%;
    height: clamp(240px, 69.231vw, 480px);
    background: var(--qr-mobile-scene) center 43% / 130% auto no-repeat #080a0c;
  }

  body.quiz-redesign .qr-result .qr-art svg {
    visibility: hidden;
  }

  body.quiz-redesign .qr-result .qr-art::after {
    background: linear-gradient(0deg, #080a0c, #080a0c00 18%);
  }

  body.quiz-redesign .qr-result::before {
    background: none;
  }

  body.quiz-redesign .qr-result .qr-copy {
    padding-top: 12px;
  }
}