/* cratepusher: rules used only by the cratepusher pages (loaded after base.css). */
/* Crate Pusher: the board is one button per cell, sized in px by
   cratepusher-app.js from the available width (32 px at least). Every
   cell shows its content as an inline SVG - wall solid black, target a
   small hollow square, crate a framed square with a cross, crate on a
   target a solid square, the pusher a filled circle - so nothing depends
   on colour or grey. Thin cell lines keep the floor readable. */
.cp-counters {
  text-align: center;
  margin: 0 0 0.3rem;
}

.cp-counters > span {
  display: inline-block;
  margin: 0.15rem 0.25rem;
}

.cp-best {
  text-align: center;
  font-size: 0.9rem;
  margin: 0 0 0.4rem;
}

.cp-board {
  margin: 0 auto;
  line-height: 0;
  border: 2px solid var(--border);
}

.cp-row {
  white-space: nowrap;
}

.cp-cell {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  min-height: 0;
  min-width: 0;
  border: 1px solid #c8c8c4;
  border-radius: 0;
  background: #fff;
  cursor: pointer;
}

.cp-cell svg {
  display: block;
  width: 100%;
  height: 100%;
}

.cp-cell:focus-visible {
  outline: 3px double var(--border);
  outline-offset: -4px;
}