/* ── Landscapes ───────────────────────────────────────────────────────────────
   A printed plate cut into pieces. The one idea to hold on to: THE CUT IS A
   CROP, NOT A GAP. The grid has no gap at all, so every piece sits on its exact
   cell and the picture is always in register; a loose piece then clips a strip
   off each of its four edges and shows the rest. Joining drops the clip on that
   one shared edge, and each side reveals the strip it was hiding.

   Draw it as a grid gap instead and joining looks like the pieces GREW — closing
   the gap gives each of them more room while they still show the same picture.
   That was the first cut of this screen and it read as a bug, correctly.        */

.landscapes-play .q-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.la-board {
  position: relative;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(var(--la-cols), 1fr);
  aspect-ratio: var(--la-cols) / var(--la-rows);
  width: min(92vw, 420px);
  max-height: 68vh;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* The whole state of a piece — which edges are cropped, which corners are still
   rounded — is one animatable clip-path string, computed in clipFor(). */
.la-tile {
  position: relative;
  background-repeat: no-repeat;
  cursor: grab;
  transition: clip-path var(--duration-2) var(--ease), opacity var(--duration-1) var(--ease);
}
.la-tile:active { cursor: grabbing; }
/* what a fragment leaves behind while it is in the air */
.la-tile.lifted { opacity: 0.16; }
/* a joined piece is part of something, and reads as lifted off the table */
.la-tile.joined { filter: drop-shadow(0 1px 3px var(--la-seam)); }
.la-board.whole .la-tile { filter: none; }

/* ── where a fragment would land ───────────────────────────────────────────
   On its OWN layer, never on the tiles: a tile carries a clip-path, and a
   clip-path clips an outline away with everything else outside the inset box —
   the indicator would be drawn and then immediately cut off. A layer also lets
   it be ONE border round the whole footprint rather than a box per cell. */
.la-drop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-panel);
}
.la-drop > i {
  position: absolute;
  display: block;
  box-sizing: border-box;
  border: 0 solid var(--accent);
  background: var(--accent-dim);
}
.la-drop.bad > i {
  border-color: var(--danger-line);
  background: var(--over);
}

/* ── the fragment in hand ──────────────────────────────────────────────────
   A container, not a tile: one child per piece, in their arrangement, wearing
   the same crop they have on the board — so a fragment travels looking exactly
   as it sat, joins included. A single square under the finger is what makes a
   joined fragment feel like it has come apart in the player's hand. */
.la-ghost {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  pointer-events: none;
  z-index: var(--z-ghost);
  filter: drop-shadow(0 8px 16px var(--la-lift));
  opacity: 0.95;
}
.la-ghost.on { display: block; }
.la-ghost > i {
  position: absolute;
  display: block;
  background-repeat: no-repeat;
}

/* ── the level-card / hub thumbnail ──────────────────────────────────────── */
.la-mini {
  display: grid;
  grid-template-columns: repeat(var(--la-cols), 1fr);
  width: 100%;
  aspect-ratio: var(--la-cols) / var(--la-rows);
  gap: 1px;
}
.la-mini i { display: block; background: var(--la-i10); }