@import url(./common.css);
@import url(./header.css);
@import url(./footer.css);

main {
  max-width: 1280px;
  margin: 0 auto;
}

.game {
  width: 100%;
  padding: 0 20px;
}

.game-detail {
  display: flex;
  align-items: center;
}

.game-left {
  width: 180px;
  height: 180px;
  border-radius: 10px;
}

.game-left img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.game-right {
  margin-left: 30px;
}

.game-right .game-name {
  font-size: var(--xxxxxl-fontsize);
  font-weight: 700;
}

.game-right .tag {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100px;
  height: 30px;
  padding: 0 5px;
  font-size: var(--s-fontsize);
  font-weight: 700;
  color: #969696;
  border: 1px solid #969696;
  border-radius: 4px;
  margin: 8px 0;
}

.game-right .game-score {
  display: flex;
  align-items: center;
}

.game-right .game-score .game-rate {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.game-rate .score-icon {
  display: block;
  width: 32px;
  height: 32px;
  background-image: url(../imgs/start.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.game-rate .score_span {
  font-size: var(--xxl-fontsize);
  color: var(--main-color);
}

.game-score .game-playnum {
  color: #969696;
}

.game .game-button {
  display: block;
  width: 200px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  border-radius: 50px;
  background-color: var(--main-color);
  color: #ffffff;
  font-weight: 700;
  margin: 50px auto;
}

.game .game-button.disabled {
  background: #5f5f5f;
}

.game .game-desc {
  font-size: var(--s-fontsize);
  color: #5f5f5f;
}

.recommend {
  padding: 10px;
}

.recommend .content .games {
  grid-template-columns: repeat(8, 1fr);
  padding: 0;
}

@media screen and (max-width: 539px) {
  .game {
    padding: 0 2vmin;
  }

  .game-left {
    width: 35vmin;
    height: 35vmin;
  }

  .game-right {
    margin-left: 6vmin;
  }

  .game-right .game-name {
    --xxxxxl-fontsize: 6vmin;
    width: 53vmin;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .game-rate .score-icon {
    width: 8vmin;
    height: 8vmin;
  }

  .game-rate .score_span {
    --xxl-fontsize: 6vmin;
  }

  .game-score .game-playnum {
    font-size: 4vmin;
  }

  .recommend {
    padding: 0 2vmin;
  }
  .recommend .content .games {
    grid-template-columns: repeat(3, 1fr);
  }
}