.cercador { max-width: 620px; margin: 24px auto; padding: 20px; border: 2px solid #d3d6da; border-radius: 8px; }
.cerca-bloc { margin-bottom: 14px; }
.cerca-bloc label { display: block; font-weight: 700; margin-bottom: 6px; }
.cercador input { box-sizing: border-box; }
.cerca-bloc > input { width: 100%; padding: 10px; font-size: 18px; text-transform: uppercase; border: 2px solid #d3d6da; border-radius: 4px; }
.cerca-bloc > input::placeholder { text-transform: none; }
.cerca-pos { display: flex; gap: 6px; }
.cerca-pos input {
  width: 52px; height: 52px; text-align: center; font-size: 24px; font-weight: 700; text-transform: uppercase;
  border: 2px solid #6aaa64; border-radius: 4px; padding: 0;
}
#cerca-grogues { border-color: #c9b458; }
#cerca-grises { border-color: #787c7e; }
.cerca-botons { text-align: center; margin: 10px 0; }
.cerca-botons button { background: #6aaa64; color: #fff; border: 0; border-radius: 4px; padding: 10px 20px; font-weight: 700; cursor: pointer; }
.cerca-total { font-weight: 700; margin: 16px 0 8px; }
.cerca-llista { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.cerca-llista li { background: #f3f3f3; border-radius: 4px; padding: 6px 4px; text-align: center; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.joc-boto {
  display: inline-block; background: #6aaa64; color: #fff !important; padding: 12px 22px;
  border-radius: 4px; font-weight: 700; text-decoration: none;
}