/* Face-area screen polish. Kept isolated so quiz behavior and zone geometry stay intact. */

.question-screen--face-map {
  overflow-x: clip;
  background:
    radial-gradient(circle at 10% 64%, rgba(255, 235, 226, 0.34), transparent 34%),
    #f7f7f8;
}

.question-screen--face-map .focus-practice-stage {
  isolation: isolate;
}

.question-screen--face-map .focus-practice-illustration {
  width: 78%;
  height: min(480px, calc(100svh - 315px));
  min-height: 420px;
  left: -32px;
  overflow: visible;
}

.question-screen--face-map .face-zone-overlay image {
  filter: saturate(1.03) contrast(1.01);
}

.question-screen--face-map .focus-practice-illustration::after {
  z-index: 3;
  height: 90px;
  background: linear-gradient(to bottom, rgba(247, 247, 248, 0), #f7f7f8 64%);
}

.question-screen--face-map .focus-option {
  border-radius: 20px;
}

@media (max-width: 430px) {
  .question-screen--face-map .focus-practice-illustration {
    width: 82%;
    height: min(480px, calc(100svh - 315px));
    left: -35px;
  }
}

@media (max-width: 370px) {
  .question-screen--face-map .focus-practice-illustration {
    width: 84%;
    left: -38px;
  }
}