/* "Ändern" screen (change.js / change-view.js): the Werft's text column on the left, the game's planet on the right.
   Same parts as the Werft (light lanes, light points); only what is new for this screen lives here. */
body[data-screen="change"] #change {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 460ms var(--ease) 140ms, visibility 0s;
}
#change-examples { margin-top: calc(var(--u) * 22); }
#change-examples .lane { font-size: calc(var(--u) * 28); min-height: calc(var(--u) * 72); }
#change-now {
  min-height: calc(var(--u) * 46);
  margin: calc(var(--u) * 26) 0 calc(var(--u) * 10);
  font: 500 calc(var(--u) * 32)/1.35 var(--font-text);
  color: var(--milk);
  max-width: 42vw;
}
#change-now.is-done { font-family: var(--font-display); font-weight: 600; color: var(--aurora); }
/* Before the change starts the line is a hint (what it costs, where it came from): quiet like the game's description on the main menu,
   not a bold block of text (20.10., Alex: the screens behind „Ändern“ in the menu's design). */
#change[data-phase="input"] #change-now { font: 400 calc(var(--u) * 25)/1.45 var(--font-text); color: var(--milk-2); }
/* While the console works on the change, the wish stays readable but is no longer a field. */
#change:not([data-phase="input"]) #change-field { opacity: .55; pointer-events: none; }
#change[data-phase="running"] #change-now::after,
#change[data-phase="undoing"] #change-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;
}
@keyframes change-breathe { 50% { opacity: .25; transform: scale(.7); } }
body.reduced #change-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) {
  #change-examples .lane { min-height: max(var(--tap), calc(var(--u) * 72)); }
}
@media (pointer: coarse) and (max-width: 600px) and (orientation: portrait) {
  #change-now { max-width: none; }
}