/* Full-screen solution page for phones: board fixed on top, steps below. */
#replayScreen { display: none; }
@media (max-width: 900px) {
  body.replay-open { overflow: hidden; }
  body.replay-open > :not(#replayScreen):not(script) { display: none !important; }
  body.replay-open #replayScreen {
    --rb: max(160px, min(100vw - 32px, 100dvh - 300px));
    position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--bg, #14161c); color: var(--text, #e8e9ee);
  }
  #replayScreen .replay-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; height: 40px; margin-bottom: 12px; }
  #replayScreen .replay-title { font-size: 19px; font-weight: 600; }
  #replayScreen .replay-body { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
  #replayScreen .replay-slot { flex: none; width: var(--rb); max-width: 100%; max-height: var(--rb); overflow: auto; display: flex; align-items: center; justify-content: center; }
  #replayScreen .replay-slot > * { max-width: 100%; }
  #replayScreen .replay-slot > .board-scroll { width: 100%; }
  /* The board is view-only here; taps fall through so it can still scroll. */
  #replayScreen .replay-slot * { pointer-events: none; }
  #replayScreen .replay-panel { flex: 1; min-height: 0; width: 100%; overflow-y: auto; }
  #replayScreen .replay-panel > .card { border: 0; padding: 0; background: none; margin: 0; }
  #replayScreen .replay-panel .card > h2 { display: none; }
  /* Step controls first; the summary and copy button follow (galaxies, star battle). */
  #replayScreen .replay-panel > .card { display: flex; flex-direction: column; }
  #replayScreen .replay-panel #steps { order: -1; margin-bottom: 12px; }
  #replayScreen .replay-panel #steps > h2 { display: none; }
  #replayScreen .replay-panel .steps-head { position: sticky; top: 0; z-index: 2; background: var(--bg, #14161c); padding-bottom: 6px; }
  #replayScreen .replay-panel #stepList { max-height: none; overflow: visible; }
}
@media (max-width: 900px) and (orientation: landscape) {
  body.replay-open #replayScreen { --rb: max(160px, min(52vw, 100dvh - 100px)); }
  #replayScreen .replay-body { flex-direction: row; align-items: stretch; }
  #replayScreen .replay-slot { align-self: center; }
  #replayScreen .replay-panel { width: 0; }
}