.array-stage {
  background: rgba(255, 250, 239, .38);
  border: 2px dashed rgba(255, 255, 255, .7);
  border-radius: 18px;
  box-shadow: inset 0 0 36px rgba(91, 56, 31, .08);
}

.array-stage.drag-over {
  background: rgba(232, 247, 244, .82);
  border-color: var(--turq);
  box-shadow: 0 0 0 5px rgba(73, 174, 176, .12);
}

.drop-prompt {
  align-self: center;
  color: #877d70;
  font: 900 .86rem/1.45 "Nunito", sans-serif;
  max-width: 210px;
  text-align: center;
}

.tile {
  border-radius: calc(var(--tile-size, 38px) * .18);
  cursor: grab;
  height: var(--tile-size, 38px);
  touch-action: none;
  width: var(--tile-size, 38px);
}

.tile:active { cursor: grabbing; }

.tile-bench {
  backdrop-filter: none;
  background: rgba(91, 57, 34, .08);
  border: 2px solid rgba(255, 255, 255, .62);
  box-shadow: 0 19px 45px rgba(24, 34, 47, .18), inset 0 0 80px rgba(255, 246, 225, .13);
}

.rectangle-check {
  align-items: center;
  background: #e7f6ee;
  border: 2px solid #62ae89;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(43, 92, 68, .2);
  color: #315d48;
  display: flex;
  font: 900 1rem "Nunito", sans-serif;
  justify-content: center;
  left: 50%;
  opacity: 0;
  padding: 8px 14px;
  pointer-events: none;
  position: absolute;
  top: 47%;
  transform: translate(-50%, -50%) scale(.82);
  transition: .2s;
  z-index: 4;
}

.rectangle-check.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.found-rectangles {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.found-rectangles > b {
  color: #73747b;
  font: 900 .68rem "Nunito", sans-serif;
  letter-spacing: .06em;
  margin-right: 2px;
}

.rectangle-proof {
  background: #e7f6ee;
  border: 1px solid #78b99c;
  border-radius: 999px;
  color: #315d48;
  font: 900 .76rem "Nunito", sans-serif;
  padding: 5px 9px;
}

.table-patterns {
  background: rgba(255, 253, 247, .9);
  border: 1px solid rgba(91, 57, 34, .2);
  border-radius: 14px;
  margin-top: 12px;
  max-width: 470px;
  padding: 11px;
  width: 100%;
}

.row-picker button {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 7px;
  min-width: 88px;
  padding: 8px 10px;
}

.row-picker button::before {
  background: repeating-linear-gradient(90deg, #5db7b5 0 7px, #fff 7px 9px);
  border: 1px solid #489b9c;
  border-radius: 3px;
  content: "";
  height: 18px;
  width: 26px;
}

.row-picker button.drag-over {
  background: #e4f5ec;
  border-color: #58aa87;
  box-shadow: 0 0 0 4px rgba(88, 170, 135, .14);
  transform: translateY(-2px);
}

.drag-ghost {
  background: #fff;
  border: 2px solid var(--turq);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(28, 49, 58, .24);
  font: 900 .82rem "Nunito", sans-serif;
  padding: 9px 12px;
  pointer-events: none;
  position: fixed;
  transform: translate(-50%, -50%) rotate(-2deg);
  z-index: 30;
}

.tile-ghost {
  background: linear-gradient(145deg, #69c3c0, #31989c);
  border: 2px solid rgba(255, 255, 255, .85);
  height: 38px;
  padding: 0;
  width: 38px;
}