h2[id^="precoUp"]{
  display: block;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

#tabelaComprasUpgrades {
  margin: 0 12px;
  font-size: 12px;
  border: 2px solid black;
  border-collapse: collapse;
}
.nomeUpgrade {
  height: 90px !important;
  overflow: hidden;
}
.qntUp {width: 60px;}
.precoCompra {
  width: 170px;
  padding: 0 10px;
  white-space: nowrap;         
  overflow: hidden;            
  text-overflow: ellipsis;
  text-align: center;
}


.botaoMudarNumUpgrade {
  height: 100%;
  width: 100%;
  border-radius: 0px;
  border: 0;
  font-size: 1.5rem;
  background-color: rgb(226, 226, 226);
}
.botaoMudarNumUpgrade:hover {filter: brightness(0.8);}
.botaoMudarNumUpgrade:active {animation: clickCompraUpgrade 200ms ease-in-out;}

th,
tr,
td {
  height: 50px;
  border: 1px solid black;
  text-align: center;
}
th {
  width: 33%;
  background-color: rgb(68, 42, 8);
  color: aliceblue;
}
thead tr:last-of-type {
  background-color: rgb(68, 68, 68);
}

#infoUpgrade{display: none;}

@media (max-width: 600px) {
  .botaoMudarNumUpgrade{
    font-size: 1.2rem;
  }
  h2[id^="precoUp"]{
    font-size: 1em;
  }
  thead h1{
    font-size: 1.5em;
  }
}

@media (max-width: 480px) {
  .botaoMudarNumUpgrade{
    font-size: 1.2rem;
  }
  .nomeUpgrade button{
    font-size: 1rem;
  }
}



jogo-upgrades{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 16px;
  gap: 1em;
}

.itemUpgrade{
  background: radial-gradient(rgb(211, 169, 118), rgb(107, 79, 46));
  cursor: pointer;
}
.itemUpgrade > div:first-of-type{
  position: relative;
}
.itemUpgrade *{
  user-select: none;
}

.upgradeBloqueado {
  filter: brightness(0.55) saturate(0.5);
  cursor: not-allowed;
}

.imgUpgrade{
  aspect-ratio: 50 / 35;
  height: 128px;
  object-fit: cover;
}

.quantidadeUpgrade{
  color: white;
  background-color: black;
  padding: 4px;
  position: absolute;
  bottom: 0;
  right: 0;
}

.precoUpgrade{
  color: white;
  width: auto;
  text-align: center;
}