.rank{
	width: 100%;
	display: flex;
	flex-direction: column-reverse;
	justify-content: space-evenly;
	align-items: center;
}

.box-rank{
  max-width: 45%;
}

.rank-img{
  display: flex;
  flex-direction: row;
	width: auto;
	margin: 0px;
	margin-top: 75x;
}

.box-titulo{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 35%;
	margin: 0px;
	margin-top: 75px;
}

.rank img{
	width: 50px;
	height: auto;
}

.rank-titulo{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 80%;
}

.rank-titulo h2{
  color: #fff;
  font-size: 40px;
}

.rank-buttons{
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.rank-buttons button {
  margin: 5px;
  padding: 10px 15px;
  background: #1a1a1a;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 15pt;
  font-family: 'Times New Roman', Times, serif;
}

button:hover {
  background: #555;
}

#ranking {
  border-collapse: collapse;
  width: 100%;
  margin-top: 15px;
}

#ranking thead{
	display: none;
}

#ranking th, #ranking td {
  border: none; /* remove as bordas */
  padding: 8px;
  text-align: center;
  color: #fff;
}


#ranking th {
  background-color: #333;
  color: #fff;
}

#ranking td{
	font-weight: bold;
}

#ranking tbody { 
	display: block; 
	max-height: 500px; /* ajustável: exibe ~10–15 linhas */ 
	overflow-y: auto; 
}

#ranking , #ranking tbody tr { 
	display: table; 
	width: 100%; 
	table-layout: fixed; 
}

#ranking tbody::-webkit-scrollbar {
  width: 6px;
}

#ranking tbody::-webkit-scrollbar-track {
  background: transparent;
}

#ranking tbody::-webkit-scrollbar-thumb {
  background-color: #555;
  border-radius: 3px;
}

#ranking tbody::-webkit-scrollbar-thumb:hover {
  background-color: #777;
}

/* Gradiente aplicado só ao número */
tr.ouro .numero {
  background: linear-gradient(45deg, #f5e197, #d4af37, #b8860b, #f5e197);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  font-size: 15pt;
}

tr.prata .numero {
  background: linear-gradient(45deg, #e0e0e0, #c0c0c0, #a9a9a9, #e0e0e0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  font-size: 15pt;
}

tr.bronze .numero {
  background: linear-gradient(45deg, #f0c27b, #cd7f32, #8b4513, #f0c27b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  font-size: 15pt;
}

.nome-ouro, .score-ouro {
  background: linear-gradient(45deg, #f5e197, #d4af37, #b8860b, #f5e197);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  font-size: 15pt;
}

.nome-prata, .score-prata {
  background: linear-gradient(45deg, #e0e0e0, #c0c0c0, #a9a9a9, #e0e0e0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  font-size: 15pt;
}

.nome-bronze, .score-bronze {
  background: linear-gradient(45deg, #f0c27b, #cd7f32, #8b4513, #f0c27b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  font-size: 15pt;
}

@keyframes pulse-brilho {
  0%   { filter: drop-shadow(0 0 1px gold); }
  50%  { filter: drop-shadow(0 0 2px gold); }
  100% { filter: drop-shadow(0 0 1px gold); }
}

@keyframes pulse-prata {
  0%   { filter: drop-shadow(0 0 1px silver); }
  50%  { filter: drop-shadow(0 0 2px silver); }
  100% { filter: drop-shadow(0 0 1px silver); }
}

@keyframes pulse-bronze {
  0%   { filter: drop-shadow(0 0 1px #cd7f32); }
  50%  { filter: drop-shadow(0 0 2px #cd7f32); }
  100% { filter: drop-shadow(0 0 1px #cd7f32); }
}

tr.ouro .numero, .nome-ouro, .score-ouro {
  animation: pulse-brilho 6s ease-in-out infinite;
}

tr.prata .numero, .nome-prata, .score-prata {
  animation: pulse-prata 6s ease-in-out infinite;
}

tr.bronze .numero, .nome-bronze, .score-bronze {
  animation: pulse-bronze 6s ease-in-out infinite;
}

.medalha{
	font-size: 15pt;
}

@media screen and (max-width:599px) {
  .box-rank{
    max-width: 90%;
  }
}