/* ── LITS ─────────────────────────────────────────────────────────────────────
   The approved "Letters" look (sandbox-lits-style.html): a plain black-and-white
   board with grey cells — the only colour is the pieces. A shaded region takes
   its tetromino's LETTER colour (I·L·T·S) once it actually forms that piece; a
   partial blob stays neutral grey. Region walls are drawn the Queens way — every
   cell carries all four real borders (thin grid, or a heavier wall where it meets
   another region) and the board gets one outline, so corners mitre with no gaps.
   All colours come from the --lits-* tokens in tokens.css, so both themes work. */

/* ── play: layout ─────────────────────────────────────────────────────── */

.lits-play {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.lits-chrome {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  padding-top: calc(var(--space-4) + var(--sat));   /* clear the notch */
  border-bottom: var(--hairline) solid var(--line);
}
.lits-chrome .spacer { flex: 1; }
.lits-chrome .lits-title { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text); letter-spacing: var(--tracking-label); }
.lits-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}

.lits-stage {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: var(--space-6);
}

.lits-loading {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-label);
  color: var(--mute);
  text-align: center;
}

/* no foot: LITS has no play options — undo/redo is the shared .q-ur bar
   (src/ui/play-options.js) between the stage and where a foot would sit */

/* ── the board ────────────────────────────────────────────────────────── */

.lits-board {
  --n: 7;
  /* Region walls must read ABOVE the cell fill in both themes. The baked
     --lits-wall token is near-black, which vanishes on the dark paper — so the
     board re-derives its inks from --text (light-on-dark in dark theme,
     dark-on-light in light) the same way KenKen's cages do. */
  --lits-wall: color-mix(in srgb, var(--text) 88%, var(--lits-paper));
  --lits-grid: color-mix(in srgb, var(--text) 16%, var(--lits-paper));
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  grid-template-rows: repeat(var(--n), 1fr);
  width: min(92vw, 66vh, 520px);
  aspect-ratio: 1;
  background: var(--lits-paper);
  /* a hair of dark ink around the whole slab (Queens approach) */
  outline: 2px solid var(--lits-wall);
  border-radius: 2px;
  /* none, not manipulation: a press-drag paints, it must not scroll/select */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.lits-cell {
  position: relative;
  box-sizing: border-box;
  padding: 0;
  background: var(--lits-paper);           /* empty cells are grey paper */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* every cell carries all four real borders — thin grid by default … */
  border: 1px solid var(--lits-grid);
  transition: filter var(--duration-1) var(--ease);
}
.lits-cell:hover { filter: brightness(1.06); }
.lits-cell:active { filter: brightness(0.94); }
/* … a heavier wall on whichever side meets another region (or the edge) */
.lits-cell.wt { border-top: 2px solid var(--lits-wall); }
.lits-cell.wr { border-right: 2px solid var(--lits-wall); }
.lits-cell.wb { border-bottom: 2px solid var(--lits-wall); }
.lits-cell.wl { border-left: 2px solid var(--lits-wall); }

/* the shade — an inner block that pops in; neutral grey until its region forms a
   valid piece, then it takes the piece's letter colour */
.lits-g {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(0.72);
  background: var(--lits-ink);
  transition: opacity 0.12s var(--ease), transform 0.12s var(--ease), background 0.2s var(--ease);
  pointer-events: none;
}
.lits-cell.on .lits-g { opacity: 1; transform: none; }
.lits-cell.on[data-type="x"] .lits-g { background: var(--lits-ink); opacity: 0.4; }   /* shaded, not a valid piece yet */
.lits-cell.on[data-type="I"] .lits-g { background: var(--lits-I); }
.lits-cell.on[data-type="L"] .lits-g { background: var(--lits-L); }
.lits-cell.on[data-type="T"] .lits-g { background: var(--lits-T); }
.lits-cell.on[data-type="S"] .lits-g { background: var(--lits-S); }

/* the cross — a faint centred dot marking a cell decided to be blank */
.lits-x {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.12s var(--ease);
  pointer-events: none;
}
.lits-x::before {
  content: "";
  width: 16%;
  height: 16%;
  border-radius: var(--radius-full);
  background: var(--lits-ink);
  opacity: 0.55;
}
.lits-cell.cross .lits-x { opacity: 1; }

/* the hint pulse */
.lits-cell.hinted { animation: lits-hint 1.6s var(--ease) 2; z-index: 1; }
@keyframes lits-hint {
  0%, 100% { box-shadow: inset 0 0 0 0 var(--accent); }
  50% { box-shadow: inset 0 0 0 3px var(--accent); }
}

/* reopened-solved banner */
.pz-review {
  margin-top: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--mute);
  text-align: center;
}

/* ── landscape phone: board left, controls stacked right ──────────────── */
@media (orientation: landscape) and (max-height: 700px) {
  .lits-play { flex-direction: row; }
  .lits-chrome {
    flex-direction: column;
    border-bottom: none;
    border-right: var(--hairline) solid var(--line);
    padding: var(--space-4);
  }
  .lits-chrome .spacer { flex: 1; }
  .lits-board { width: min(88vh, 78vw); }
}

/* ── the region-grid thumbnail on a level card ─────────────────────────── */
.lits-mini {
  /* same wall/grid contrast fix as the play board */
  --lits-wall: color-mix(in srgb, var(--text) 88%, var(--lits-paper));
  --lits-grid: color-mix(in srgb, var(--text) 16%, var(--lits-paper));
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  aspect-ratio: 1;
  width: 100%;
  background: var(--lits-paper);
  outline: 1.5px solid var(--lits-wall);
}
.lits-mini-c {
  position: relative;
  box-sizing: border-box;
  border: 0.5px solid var(--lits-grid);
}
.lits-mini-c.wt { border-top: 1.5px solid var(--lits-wall); }
.lits-mini-c.wr { border-right: 1.5px solid var(--lits-wall); }
.lits-mini-c.wb { border-bottom: 1.5px solid var(--lits-wall); }
.lits-mini-c.wl { border-left: 1.5px solid var(--lits-wall); }
.lits-mini-c .g { position: absolute; inset: 1px; background: var(--lits-ink); opacity: 0.4; }
.lits-mini-c .g[data-type="I"] { background: var(--lits-I); opacity: 1; }
.lits-mini-c .g[data-type="L"] { background: var(--lits-L); opacity: 1; }
.lits-mini-c .g[data-type="T"] { background: var(--lits-T); opacity: 1; }
.lits-mini-c .g[data-type="S"] { background: var(--lits-S); opacity: 1; }
.lits-mini-c .x {
  position: absolute; inset: 0; margin: auto;
  width: 18%; height: 18%; border-radius: var(--radius-full);
  background: var(--lits-ink); opacity: 0.5;
}