/* Look Back — a 3×3 grid of squares in the top area (stimulus only, not tapped), Same / Different at the bottom.
   Heights follow the screen (dvh) so both buttons stay on screen on an iPhone SE and smaller. */

.lb-stim { flex-direction: column; gap: 14px; min-height: 0; }
.lb-grid {
  width: min(100%, 31dvh, 250px);
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.lb-cell { display: block; border: 1px solid #3A3835; border-radius: 12px; }
/* a light: shown instantly, no fade */
.lb-cell.lit { background: var(--stage-ink); border-color: var(--stage-ink); box-shadow: 0 0 22px rgba(238, 235, 229, 0.16); }
/* practice only: the square N steps back, to compare with */
.lb-cell.ref { outline: 1px dashed var(--stage-dim); outline-offset: -7px; }
.lb-grid.wrong { opacity: 0.4; }
.lb-caption { margin: 0; min-height: 1.4em; font-size: 13px; color: #6A665F; text-align: center; }

.lb-pad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; height: clamp(120px, 30dvh, 260px); }
.lb-btn { min-height: 44px; color: var(--stage-ink); font-size: 17px; font-weight: 300; user-select: none; -webkit-user-select: none; }
.lb-btn svg { display: block; color: var(--stage-dim); }
.lb-btn.ack { background: #22211F; }
/* while the first squares are only watched, the buttons rest */
.lb-pad.idle .lb-btn { opacity: 0.4; }