/* Light Path — a grid of squares on the dark stage. The grid is both the stimulus and the control, so it sits
   in the bottom ~45% of the screen; the status (dots, "2 of 6") floats in the open space above. */

.lp-stim { min-height: 0; }
.lp-status { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lp-dots { display: flex; gap: 10px; min-height: 8px; }
.lp-dots i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--stage-faint); box-sizing: border-box; }
.lp-dots i.on { background: var(--stage-ink); border-color: var(--stage-ink); }
.lp-dots i.miss { border-color: var(--stage-dim); }
.lp-sub { margin: 0; min-height: 1.4em; font-size: 13px; color: var(--stage-dim); }

.lp-controls { align-items: center; }
/* Light Path and Path Back. Sized by the screen height (41dvh) so the grid stays fully on screen on short phones,
   but never so small that a square drops under 44 px. */
.lp-grid {
  --n: 3;
  --gap: 10px;
  width: min(100%, max(41dvh, calc(var(--n) * 44px + (var(--n) - 1) * var(--gap))), 360px);
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  grid-template-rows: repeat(var(--n), minmax(0, 1fr));
  gap: var(--gap);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.lp-grid[data-side='4'] { --gap: 8px; }
.lp-grid[data-side='5'] { --gap: 7px; }

.lp-cell {
  position: relative;
  padding: 0;
  border: 1px solid #3A3835;
  border-radius: 12px;
  background: transparent;
  color: var(--stage-dim);
  font-size: 15px;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  touch-action: manipulation;
}
.lp-grid[data-side='4'] .lp-cell { border-radius: 10px; }
.lp-grid[data-side='5'] .lp-cell { border-radius: 8px; }
.lp-grid.live .lp-cell { cursor: pointer; }
.lp-grid.live .lp-cell:active { background: #1E1D1B; }

/* a light: shown instantly, no fade */
.lp-cell.lit { background: var(--stage-ink); border-color: var(--stage-ink); box-shadow: 0 0 22px rgba(238, 235, 229, 0.16); }
/* a ghost: an outline only — never a fill — so it can't be mistaken for a light */
.lp-cell.ghost { border-color: var(--stage-dim); box-shadow: inset 0 0 0 1px var(--stage-dim); }
/* first practice path: the next square is marked with a dashed ring */
.lp-cell.guide { outline: 1px dashed var(--stage-dim); outline-offset: -7px; }

/* taken back (in order) */
.lp-cell.done { background: #22211F; border-color: var(--stage-faint); color: var(--stage-dim); }
/* after a miss: the right path, numbered */
.lp-cell.path { border-color: var(--stage-ink); color: var(--stage-ink); }
.lp-cell.wrong { opacity: 0.4; }
.lp-cell.wrong.path { opacity: 0.55; }