.wb-picture {
  font-size: clamp(3.5rem, 10vw, 6rem);
  text-align: center;
  margin: .25rem 0 .75rem;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.4));
}
.wb-target {
  color: var(--accent);
  font-family: 'Caveat', cursive;
  letter-spacing: .15em;
}
.wb-slots, .wb-tray {
  display: flex;
  justify-content: center;
  gap: .55rem;
  flex-wrap: wrap;
  margin: .75rem 0;
}
.wb-slot {
  width: clamp(48px, 12vw, 68px);
  height: clamp(56px, 14vw, 80px);
  border: 3px dashed var(--chalk-dim);
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-family: 'Caveat', cursive;
  font-size: clamp(2.2rem, 6vw, 3rem);
  color: var(--chalk);
  background: rgba(0,0,0,.2);
  transition: background .15s ease, border-color .15s ease;
}
.wb-slot.is-target { border-color: var(--accent); }
.wb-slot.is-good { background: rgba(155,240,155,.2); border-color: var(--accent-4); border-style: solid; }

.wb-tile {
  width: clamp(48px, 12vw, 68px);
  height: clamp(56px, 14vw, 80px);
  border-radius: 10px;
  background: linear-gradient(180deg, #f7f3e8, #e7e0c7);
  color: var(--slate-900);
  font-family: 'Caveat', cursive;
  font-size: clamp(2.2rem, 6vw, 3rem);
  font-weight: 700;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 5px 0 rgba(0,0,0,.35);
  transition: transform .1s ease;
  touch-action: manipulation;
}
.wb-tile:hover { transform: translateY(-2px); }
.wb-tile:active { transform: translateY(1px); box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.wb-tile.is-used { opacity: .25; pointer-events: none; }

.wb-controls {
  display: flex;
  justify-content: center;
  gap: .75rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}