/* Supplied portrait artwork; percentages keep controls aligned with its pixels. */
.app[data-screen="question"] { align-items: center; }
.question-screen {
  width: min(100%, 460px, max(320px, calc((100svh - 48px) * .461538)));
  position: relative;
  box-shadow: 0 20px 100px #09070b90;
}
.question-art-stage { position: relative; container-type: inline-size; }
.question-art { display: block; width: 100%; height: auto; }
.question-number {
  position: absolute;
  top: 37.25%;
  left: 37%;
  width: 26%;
  height: 3%;
  display: grid;
  place-items: center;
  margin: 0;
  color: #42323d;
  font: 500 clamp(1rem, 4.25cqw, 1.25rem)/1.2 var(--serif);
  white-space: nowrap;
}
.question-copy {
  position: absolute;
  left: 13%;
  top: 42%;
  width: 74%;
  height: 17.7%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.question-title {
  margin: 0;
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #937087 transparent;
  color: #382d38;
  font: 600 clamp(1rem, 4.6cqw, 1.4rem)/1.75 var(--serif);
  letter-spacing: .025em;
  text-align: center;
  overflow-wrap: anywhere;
  line-break: strict;
  text-shadow: 0 1px 1px #fff2ed40;
}
.question-home { position: absolute; left: 6%; top: 6%; min-height: 44px; color: #f3d9e3; text-shadow: 0 1px 4px #211924; }
.question-back {
  position: absolute;
  top: 64.15%;
  left: 18%;
  width: 64%;
  min-height: 44px;
  color: #624551;
  font-size: .875rem;
}
.question-back:hover { color: #332331; }
.question-back:disabled { opacity: .45; }
.question-yes, .question-no { top: 73.9%; width: 37.7%; height: 11.8%; border-radius: 18%; }
.question-yes { left: 7.65%; }
.question-no { left: 54.6%; }
.question-flow { top: 89.25%; left: 17.1%; width: 20.9%; height: 8%; }
.question-settings { top: 89.25%; left: 64.1%; width: 17.5%; height: 8%; }
.question-count {
  position: absolute;
  top: 92.05%;
  left: 41%;
  width: 18%;
  height: 2.2%;
  display: grid;
  place-items: center;
  color: #f4d1db;
  font: 400 clamp(.875rem, 3.8cqw, 1.125rem)/1 var(--serif);
  white-space: nowrap;
}
.question-art-stage .art-button.selected {
  background: #fff1f52b;
  outline: 2px solid #ffe4c9;
  outline-offset: 2px;
  box-shadow: 0 0 25px #f6c6db70;
}
.question-art-stage .art-button:focus-visible { outline-color: #fff0c4; }
.question-back:focus-visible { outline-color: #69465d; }
[data-text="large"] .question-title { font-size: clamp(1.2rem, 5.5cqw, 1.7rem); }
@media (max-width: 520px) {
  .question-screen { width: min(100%, max(320px, calc(100svh * .461538))); }
}