/* "Deine Figur" (figure-ask.js / figure-view.js): the question after the last failed workshop attempt – keep the stand-in or describe
   the figure anew. Same text column and parts as "Melden" (report.css): light lanes, the thin text line, light points. */
body[data-screen="figure"] #figure {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 460ms var(--ease) 140ms, visibility 0s;
}
#figure-lead {
  max-width: 46vw;
  margin: 0 0 calc(var(--u) * 20);
  font: 400 calc(var(--u) * 28)/1.4 var(--font-text);
  color: var(--milk);
  text-shadow: 0 0 calc(var(--u) * 12) rgba(4, 5, 8, .9);
}
#figure-lead:empty { display: none; }
#figure-choices .lane { font-size: calc(var(--u) * 28); min-height: calc(var(--u) * 68); margin-bottom: calc(var(--u) * 8); max-width: 46vw; }
#figure-note {
  max-width: 46vw;
  margin: calc(var(--u) * 12) 0 0;
  padding: calc(var(--u) * 10) calc(var(--u) * 16);
  font-size: calc(var(--u) * 22);
  line-height: 1.4;
  color: var(--milk);
  background: rgba(14, 15, 20, .72);
  text-shadow: 0 0 calc(var(--u) * 12) rgba(4, 5, 8, .9);
}
#figure:not([data-phase="describe"]) #figure-note, #figure:not([data-phase="describe"]) #figure-field { display: none; }
#figure-now {
  min-height: calc(var(--u) * 46);
  margin: calc(var(--u) * 20) 0 calc(var(--u) * 10);
  font: 500 calc(var(--u) * 32)/1.35 var(--font-text);
  color: var(--milk);
  max-width: 42vw;
}
#figure-now:empty { min-height: 0; margin: 0; }
#figure-now.is-done { font-family: var(--font-display); font-weight: 600; color: var(--aurora); }
#figure-now.is-failed { color: var(--ember); }
#figure[data-phase="sending"] #figure-now::after {
  content: '';
  display: inline-block;
  width: calc(var(--u) * 10); height: calc(var(--u) * 10);
  margin-left: calc(var(--u) * 14);
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 calc(var(--u) * 12) var(--sun-glow);
  animation: change-breathe 1.6s var(--ease) infinite;
}
body.reduced #figure-now::after { animation: none; }

@media (pointer: coarse) and (max-width: 600px), (pointer: coarse) and (max-height: 600px) {
  #figure-choices .lane { min-height: max(var(--tap), calc(var(--u) * 68)); }
  #figure-actions {
    position: sticky; bottom: 0; z-index: 2;
    margin-top: 0;
    padding: calc(var(--u) * 28) 0 calc(var(--u) * 10);
    background: rgba(4, 5, 8, .9);
  }
  #figure-actions .lp { padding: 0 calc(var(--u) * 6); }
  body[data-screen="figure"] #toast, body[data-screen="figure"][data-device="touch"][data-back="1"] #toast { bottom: calc(var(--bar) + var(--tap) + var(--u) * 48); }
}
@media (pointer: coarse) and (max-width: 600px) and (orientation: portrait) {
  #figure-now, #figure-note, #figure-lead, #figure-choices .lane { max-width: none; }
}