/* "Melden" screen (report.js / report-view.js): the same text column as "Ändern" (change.css), the game's planet on the right.
   Parts are the Werft's: light lanes (the reasons), the thin text line, light points. Only what is new lives here. */
body[data-screen="report"] #report {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 460ms var(--ease) 140ms, visibility 0s;
}
#report-reasons .lane { font-size: calc(var(--u) * 28); min-height: calc(var(--u) * 68); margin-bottom: calc(var(--u) * 8); }
#report-reasons { margin-bottom: calc(var(--u) * 12); }
/* The chosen reason: a point of sunlight at the end of the lane (the lane keeps its warm edge for the focus only). */
.lane-reason.is-on:not(.is-focus) { color: var(--milk); }
.lane-reason.is-on::after {
  content: '';
  flex: none;
  margin-left: auto;
  width: calc(var(--u) * 16); height: calc(var(--u) * 16);
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 calc(var(--u) * 14) var(--sun-glow);
}
#report-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);
}
#report:not([data-phase="input"]) #report-note, #report:not([data-phase="input"]) #report-field { display: none; }
#report-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;
}
#report-now:empty { min-height: 0; margin: 0; }
#report-now.is-done { font-family: var(--font-display); font-weight: 600; color: var(--aurora); }
#report-now.is-failed { color: var(--ember); }
#report[data-phase="sending"] #report-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 #report-now::after { animation: none; }

/* ---------- phones (menu.css phone raster; touch.js PHONE_QUERY / PORTRAIT_QUERY) ---------- */
@media (pointer: coarse) and (max-width: 600px), (pointer: coarse) and (max-height: 600px) {
  #report-reasons .lane { min-height: max(var(--tap), calc(var(--u) * 68)); }
  /* The buttons stay at the lower edge of the screen while the reasons, the text line and the note scroll behind them
     (Bauleiter 15.10.: on an iPhone Senden/Abbrechen were below the edge and the note ran into the toast). */
  #report-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); /* flat dark glass (STYLEGUIDE §4) */
  }
  #report-actions .lp { padding: 0 calc(var(--u) * 6); }
  #report { scroll-padding-bottom: calc(var(--tap) + var(--u) * 48); }
  /* a toast here (e.g. "Such zuerst einen Grund aus.") stands above the buttons, not over them */
  body[data-screen="report"] #toast, body[data-screen="report"][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) {
  #report-now, #report-note { max-width: none; }
  /* a game now has four actions under its name (Spielen, Ändern, Teilen, Melden): they share the width and may shrink */
  #actions .lp { min-width: 0; gap: calc(var(--u) * 10); }
}