/*
 * Puzz shared-grid — the tile/connector/line visual system used inside the
 * board area (not the header/chrome — that's shell.css's job) across
 * Tangle, Split, and Escape. Identical across all three repos (copy-pasted,
 * no build step yet — same convention as packages/shared-shell, see its
 * types.md).
 *
 * A board is built from:
 *   .puzz-grid-cell — the empty background square for every logical grid
 *                      position (Tangle/Split's board squares, Escape's
 *                      tile slots before content is drawn on top).
 *   .puzz-tile       — an absolutely-positioned occupied square (a letter,
 *                      an icon, a colored game piece) inset a little from
 *                      its cell. Games whose grid isn't absolutely
 *                      positioned (Escape's CSS-grid board) use
 *                      .puzz-tile-look instead — the same shape/color/
 *                      shadow declarations, without position:absolute, so
 *                      an in-flow grid cell can carry the same tile look.
 *   .puzz-connector  — a bar filling the gap between two orthogonally
 *                      adjacent tile centers (Tangle's word links,
 *                      Escape's light paths).
 *   .puzz-wall-outline / .puzz-wall-fill — the two stacked SVG strokes of
 *                      a two-tone line (Split's split line, Escape's walls,
 *                      recolored per use).
 *
 * Games size everything by computing one `cellPx` number (via
 * grid.js#sizeGridLayout) and passing it into grid.js's drawing helpers —
 * no dimension below is a fixed px value.
 */

.puzz-grid-cell {
  position: absolute;
  background: var(--grid-cell-bg, var(--cell, #1b2c3a));
  border: 1px solid var(--grid-cell-border, var(--cell-border, #243b4d));
  border-radius: var(--grid-cell-radius, 6px);
}

.puzz-grid-root {
  position: absolute;
  border-radius: var(--grid-radius, 8px);
  transition: box-shadow 0.25s;
}
.puzz-grid-root.solved {
  box-shadow: 0 0 0 3px var(--good, #4caf6f), 0 0 18px 2px rgba(76, 175, 111, 0.5);
}

.puzz-piece-layer {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.puzz-tile, .puzz-tile-look {
  border-radius: var(--grid-radius, 8px);
  font-weight: 700;
  font-family: inherit;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  user-select: none;
}
.puzz-tile {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  cursor: pointer;
}
.puzz-tile.static { cursor: default; }
.puzz-tile.ghost { opacity: 0.5; pointer-events: none; }
.puzz-tile.cursor { opacity: 0.4; pointer-events: none; }
.puzz-tile-shadow, .puzz-tile-look { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); }
.puzz-tile-shadow.selected, .puzz-tile-look.selected { box-shadow: 0 0 0 3px var(--accent, #5eb8e8), 0 2px 4px rgba(0, 0, 0, 0.25); }
.puzz-tile-shadow.invalid, .puzz-tile-look.invalid { box-shadow: 0 0 0 3px var(--bad, #d9534f), 0 2px 4px rgba(0, 0, 0, 0.25); }

.puzz-connector {
  position: absolute;
  border-radius: var(--grid-connector-radius, 4px);
}
.puzz-connector.ghost { opacity: 0.5; }

/* Two-tone wall/line stroke (an outline pass underneath a fill pass) —
   consumers draw these as raw SVG <line>/<circle> markup via
   grid.js#twoToneLineSvg rather than as classed elements, since color is
   set per-draw; the classes exist for any consumer that wants to style the
   pass generically instead (transitions, filters). */
.puzz-wall-outline, .puzz-wall-fill {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}