.game-layout {
  display: block;
  max-width: 500px;
  margin: 0 auto;
  padding: 34px 4px 48px;
}

.board {
  grid-template-rows: repeat(10, auto);
  grid-auto-rows: auto;
  gap: 8px;
  width: min(100%, 340px);
}

.board-row {
  grid-template-columns: 22px repeat(5, minmax(0, 1fr)) 48px;
  gap: 5px;
}

.tile {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 2px;
  font-size: 27px;
}

.row-clue { gap: 3px; }

.row-clue .count-pill {
  width: 25px;
  height: 29px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 700;
}

.row-trash {
  display: grid;
  place-items: center;
  width: 22px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #919a91;
  font-size: 17px;
  cursor: pointer;
}

.row-trash:hover:not(:disabled) { color: #be6254; }
.row-trash:disabled { opacity: .34; cursor: default; }

@media (max-width: 740px) {
  .board { grid-template-rows: repeat(10, auto); gap: 8px; }
  .board-row { grid-template-columns: 20px repeat(5, minmax(0, 1fr)) 46px; gap: 4px; }
  .tile { font-size: 24px; }
  .row-clue .count-pill { width: 22px; height: 26px; font-size: 13px; }
}

@media (max-width: 390px) {
  .board { grid-template-rows: repeat(10, auto); }
  .board-row { grid-template-columns: 17px repeat(5, minmax(0, 1fr)) 43px; gap: 3px; }
  .tile { font-size: 22px; }
  .row-trash { width: 17px; font-size: 14px; }
  .row-clue .count-pill { width: 20px; height: 24px; font-size: 12px; }
}