body {
  font-family: 'Segoe UI', sans-serif;
  background: #27294e;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

header {
  text-align: center;
  padding: 40px 20px 20px;
}

h1 {
  margin: 0;
  font-size: 32px;
  color: #FFF;
}

.table-container {
  width: 90%;
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  margin-bottom: 50px;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 5px 5px;
  text-align: center;
  font-size: 25px;
}

th {
  background-color: #222;
  color: white;
}

tr:nth-child(even) {
  background-color: #fafafa;
}

.gold {
  background-color: #fff8dc;
  font-weight: bold;
}

.silver {
  background-color: #C0C0C0;
  font-weight: bold;
}

.bronze {
  background-color: #fdf5e6;
  font-weight: bold;
}

.player-photo {
  width: 69px;
  height: 69px;
  border-radius: 7px;
  object-fit: cover;
  background-color: #ccc;
  display: block;
  margin: auto;
}

.gold-border { border: 5px solid #D3AF37; }
.silver-border { border: 5px solid #A5A9B4; }
.bronze-border { border: 5px solid #A97142; }
.border { border: 5px solid #000000; }

td:nth-child(2) { text-align: center; width: 50px; }
td:nth-child(3) { text-align: center; font-size: 30px; }
td:nth-child(8) { text-align: center; font-size: 50px; }

.stats {
  font-weight: bold;
  text-align: center;
  color: black;
}

.stats[data-rank="1"] { color: #D3AF37; }
.stats[data-rank="2"] { color: #A5A9B4; }
.stats[data-rank="3"] { color: #A97142; }

.stats .win  { color: #4ade80; }
.stats .loss { color: #f87272; }
.stats .draw { color: #7ed4fc; }

.stats .owm {
  color: purple;
  font-size: 15px;
  font-weight: normal;
}

.stats .rest { line-height: 0.7; }
.stats .total { font-size: 35px; }

.stats[data-upcoming],
.stats[data-na] {
  color: gray;
  font-weight: normal;
  font-style: italic;
}

.total-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.warning {
  color: #eab308; /* amarelo */
  font-size: 24px;
  line-height: 1;
}

footer {
  text-align: center;
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}