/* The board has no gaps, so tiles share edges and pipes meet exactly. */
.pipes {
  --size: 4;
  --dry: var(--line-strong);
  --wet: var(--b);
  display: grid;
  grid-template-columns: repeat(var(--size), 1fr);
  grid-template-rows: repeat(var(--size), 1fr);
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  user-select: none;
  -webkit-user-select: none;
}

.pipe-tile {
  --pipe: var(--dry);
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: inset -1px -1px 0 var(--line);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.pipe-tile.last-col { box-shadow: inset 0 -1px 0 var(--line); }
.pipe-tile.last-row { box-shadow: inset -1px 0 0 var(--line); }
.pipe-tile.last-col.last-row { box-shadow: none; }
.pipe-tile:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.pipe-tile.wet { --pipe: var(--wet); }
.pipe-tile.flash { animation: flash 0.9s ease; }

/* The pipe is drawn in its solved position and turned as a whole. (Not `.hub`:
   that's the home page's container in styles.css.) */
.pipe { position: absolute; inset: 0; transition: transform 0.16s ease; }
.arm, .joint { position: absolute; background: var(--pipe); transition: background-color 0.2s ease; }
.arm.up { top: 0; left: 39%; width: 22%; height: 50%; }
.arm.down { top: 50%; left: 39%; width: 22%; height: 50%; }
.arm.left { top: 39%; left: 0; width: 50%; height: 22%; }
.arm.right { top: 39%; left: 50%; width: 50%; height: 22%; }
.joint { top: 39%; left: 39%; width: 22%; height: 22%; }
.end .joint { top: 27%; left: 27%; width: 46%; height: 46%; border-radius: 50%; }
.source .joint { top: 22%; left: 22%; width: 56%; height: 56%; border: 4px solid var(--surface); border-radius: 50%; background: var(--a); }

.pipes.solved .pipe { animation: pop 0.5s ease both; animation-delay: calc(var(--wave) * 50ms); }

.turns { margin: 10px 0 0; color: var(--muted); font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }

.source-dot { display: inline-block; width: 0.9em; height: 0.9em; border-radius: 50%; background: var(--a); vertical-align: -0.1em; }