/* Wall Grid: the plan (one cell per hole, the pieces drawn over it) and the placed list. The rest comes from the desk cup's sheet. */
.piece-row { flex-wrap: wrap; }
.piece-add { font-size: 13px; }
.plan { display: grid; grid-template-columns: repeat(var(--cols, 16), 1fr); grid-template-rows: repeat(var(--rows, 16), 1fr); gap: 0; width: 100%; max-width: 520px; aspect-ratio: var(--cols, 16) / var(--rows, 16);
  background: #6a7d96; border-radius: 6px; padding: 3px; box-sizing: border-box; margin: 6px 0 10px; }
.plan .cell { border: 0; padding: 0; margin: 0; background: transparent; position: relative; cursor: pointer; }
.plan .cell::after { content: ""; position: absolute; left: 34%; top: 34%; width: 32%; height: 32%; background: #2e3a4a; border-radius: 1px; }
.plan .cell:hover::after { background: #fff; }
.plan .piece { border: 0; margin: 2px; border-radius: 4px; background: #9c82ac; color: #fff; font: 600 11px/1.15 var(--font-sans, sans-serif); cursor: pointer; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); padding: 2px; overflow: hidden; }
.plan .piece.is-selected { outline: 3px solid #fff; outline-offset: -3px; }
.placed { display: grid; gap: 4px; font-size: 13px; }
.placed-row { display: flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 6px; background: rgba(0, 0, 0, .04); }
.placed-row.is-selected { background: rgba(0, 0, 0, .1); }
.placed-name { flex: 1; text-align: left; border: 0; background: transparent; font: inherit; cursor: pointer; padding: 2px 0; }
.placed-move, .placed-remove { border: 1px solid rgba(0, 0, 0, .18); background: #fff; border-radius: 5px; font: inherit; font-size: 12px; padding: 3px 7px; cursor: pointer; }
.placed-remove { margin-left: 4px; }
.lines { margin: 0 0 12px; padding-left: 18px; font-size: 14px; }
.lines li { margin: 2px 0; }