/* ── Lights Out ──────────────────────────────────────────────────────────────
   A panel of lights. The play chrome (.q-chrome / .q-stage / .q-foot) is the
   shared shell from queens.css; below is Lights Out's own — the board, the lit /
   off cells, and the press pulse. Sizing tokens (--lo-cell,
   --lo-gap, --n) are set on .lo-hold by the JS to fit the stage; colour is
   theme-aware via the app tokens, with the dark cell face pinned per theme so an
   off light always reads as a dead panel. */

.lo-play { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.lo-play .q-stage { padding: var(--space-4); overflow: auto; display: grid; place-items: center; }
.lo-hold { display: inline-block; }

/* the off-cell face (--lo-off) and lit ink (--lo-lit) are themed in tokens.css */

.lo-board {
  display: grid;
  grid-template-columns: repeat(var(--n), var(--lo-cell));
  grid-template-rows: repeat(var(--n), var(--lo-cell));
  gap: var(--lo-gap);
  padding: calc(var(--lo-gap) + 2px);
  background: var(--surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
  touch-action: none; user-select: none; -webkit-user-select: none;
}

.lo-cell {
  width: var(--lo-cell); height: var(--lo-cell);
  padding: 0; margin: 0;
  border: var(--hairline) solid var(--line);
  border-radius: calc(var(--lo-cell) * 0.18);
  background: var(--lo-off);
  cursor: pointer; position: relative;
  transition: transform 0.09s ease, background 0.14s ease, box-shadow 0.2s ease, border-color 0.14s ease;
}

/* a lit cell: the accent, glowing */
.lo-cell.lit {
  background: var(--lo-lit);
  border-color: var(--lo-lit);
  box-shadow: 0 0 0 1px var(--lo-lit), 0 0 18px 2px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* the press pulse: a quick squeeze on the tapped cell */
.lo-cell.press { transform: scale(0.9); }

/* Solve preview: the minimum-press set, outlined before it fires */
.lo-cell.hint { outline: 2px dashed var(--accent); outline-offset: 2px; z-index: 1; }

/* the finished board: a soft settle on the now-dark cells */
.lo-board.lo-clear .lo-cell { animation: lo-settle var(--duration-3) var(--ease) both; }
@keyframes lo-settle { from { transform: scale(0.86); opacity: 0.5; } to { transform: none; opacity: 1; } }

/* the press counter lives in the shared sub-bar (.q-sub) under the chrome now */

/* ── the teaching overlay's clone ───────────────────────────────────────────
   deduce.js clones the live stage into a box narrower than the game's own, but
   the board's columns are fixed pixels set by the JS — so the clone ran off the
   right edge. minmax(0, …) lets those columns shrink to whatever box they land
   in; the cells keep their square by aspect-ratio instead of a fixed width. */
.dd-board .lo-board {
  max-width: 100%;
  grid-template-columns: repeat(var(--n), minmax(0, var(--lo-cell)));
  grid-template-rows: repeat(var(--n), auto);      /* height follows the square */
}
.dd-board .lo-cell { width: auto; min-width: 0; height: auto; aspect-ratio: 1; }
/* the shared evidence ring is the accent — and a lit light IS the accent, so it
   marked nothing here. Restate it in ink, which reads on lit and dead alike. */
.dd-board .lo-cell.dd-mark {
  outline-color: var(--text);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--text) 22%, transparent);
}

/* ── "show me the best way" ────────────────────────────────────────────────
   The win sheet states how the solve compared with the provable minimum; this
   button — hung under that line, not in the cat's menu, which celebrate.js owns
   and rebuilds — opens the replay of the shortest route. */
.lo-best-btn {                                   /* rides the shared .pill shape */
  display: block; margin: var(--space-4) auto 0;
  border-color: var(--accent-line, var(--line-2)); color: var(--accent);
  cursor: pointer;
}

/* the replay itself: the dealt board, one frame per press, a timeline beneath.
   It borrows the teaching overlay's frame (.dd-top / .dd-name) so the two read
   as the same kind of full-screen aside. */
.lo-best-full {
  position: fixed; inset: 0; z-index: 64;          /* over the win sheet (--z-veil) */
  background: var(--bg);
  display: flex; flex-direction: column; min-height: 0;
  padding: max(14px, var(--sat)) 18px max(18px, var(--sab));
  animation: fade var(--duration-2) var(--ease) both;
  user-select: none; -webkit-user-select: none;
}
.lo-best-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: var(--space-4) 0; }
.lo-best-hold { display: inline-block; pointer-events: none; }

/* The cell pressed in this frame — the one thing the frame is about. Green, not
   accent: half these cells ARE the accent, and a ring the colour of the light it
   sits on marks nothing. Same green the teaching overlay uses for a conclusion. */
.lo-cell.lo-pressed {
  outline: 3px solid var(--green, #5ec27a); outline-offset: 3px; z-index: 2;
  animation: lo-best-pulse 1.6s var(--ease) infinite;
}
@keyframes lo-best-pulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--green, #5ec27a) 34%, transparent); }
  50%      { box-shadow: 0 0 0 9px color-mix(in srgb, var(--green, #5ec27a) 8%, transparent); }
}

.lo-best-say {
  flex: none; max-width: 520px; width: 100%; margin: 0 auto var(--space-4);
  min-height: 2.6em; text-align: center; font-weight: 500; color: var(--text);
}

/* the timeline: Start, then a chip per press — scrolls sideways on a long route */
.lo-best-line {
  flex: none; display: flex; gap: var(--space-2); overflow-x: auto;
  padding-bottom: var(--space-2); margin-bottom: var(--space-4);
  scrollbar-width: none;
}
.lo-best-line::-webkit-scrollbar { display: none; }
.lo-frame {
  flex: none; min-width: 34px; height: 34px; padding: 0 var(--space-2);
  border: var(--hairline) solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--dim);
  font-family: var(--font-mono); font-size: var(--text-xs); cursor: pointer;
}
.lo-frame.on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }

.lo-best-nav {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); max-width: 520px; width: 100%; margin: 0 auto;
}
.lo-best-nav .pill { min-width: 120px; justify-content: center; }
.lo-best-nav .pill:disabled { opacity: 0.45; pointer-events: none; }
.lo-best-nav .pill svg { width: 14px; height: 14px; }

/* ── level-card thumbnail: the starting pattern, lit once the level is solved ── */
.lo-mini {
  display: grid; gap: 2px;
  grid-template-columns: repeat(var(--n), 1fr);
  grid-template-rows: repeat(var(--n), 1fr);
  width: 44px; height: 44px; margin: 0 auto;
}
.lo-mini i { border-radius: 2px; background: var(--line-2); opacity: 0.35; }
.lo-mini i.on { opacity: 1; background: var(--line); }
.lo-mini.done i.on { background: var(--accent); box-shadow: 0 0 4px color-mix(in srgb, var(--accent) 60%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .lo-board.lo-clear .lo-cell { animation: none; }
  .lo-cell { transition: none; }
  .lo-cell.lo-pressed { animation: none; }
}