.slot {
  min-width: 39px;
  padding: 4px 7px;
  border: 1px solid transparent;
  border-radius: 7px;
  font-weight: 800;
  line-height: 1.15;
  color: #536159;
}

.slot[data-slot="QB"],
.slot[data-slot="TQB"] {
  background: #f4d7d4;
  border-color: #ebc1bd;
  color: #834a46;
}

.slot[data-slot="RB"],
.slot[data-slot="RB/WR"] {
  background: #f6ecc5;
  border-color: #ebdda9;
  color: #76652d;
}

.slot[data-slot="WR"],
.slot[data-slot="WR/TE"] {
  background: #dceaf4;
  border-color: #c5dce9;
  color: #45697e;
}

.slot[data-slot="TE"] {
  background: #d9eadf;
  border-color: #c0ddca;
  color: #416d50;
}

.slot[data-slot="FLEX"],
.slot[data-slot="OP"] {
  background: #f3dfcf;
  border-color: #e9cdb8;
  color: #805b42;
}

.slot[data-slot="D/ST"],
.slot[data-slot="DP"],
.slot[data-slot="DL"],
.slot[data-slot="DB"],
.slot[data-slot="LB"] {
  background: #dce2e6;
  border-color: #c9d2d8;
  color: #4e626f;
}

.slot[data-slot="K"] {
  background: #e7def1;
  border-color: #d8c9e7;
  color: #67507d;
}

.slot[data-slot="Bench"] {
  background: #eef0ec;
  border-color: #e0e4de;
  color: #717a74;
}

.slot[data-slot="IR"] {
  background: #f1dddd;
  border-color: #e7caca;
  color: #805858;
}

.player-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.team-logo,
.team-fallback {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.team-logo {
  object-fit: contain;
  padding: 2px;
  border-radius: 50%;
  background: #f5f6f2;
  box-shadow: inset 0 0 0 1px #e7eae4;
}

.team-fallback {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eef0ec;
  color: #68756e;
  font-size: 7px;
  font-weight: 800;
}

.nfl-matchup {
  white-space: nowrap;
  color: #68756e;
  font-size: 10px;
  font-weight: 750;
}

@media (max-width: 560px) {
  .team-logo,
  .team-fallback {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
  }

  .player-cell {
    gap: 5px;
  }

  .nfl-matchup {
    font-size: 9px;
  }
}