<style>
body {
  color: #eddad4;
  background: #292220;
  font-family: Inconsolata, monospace;
  margin: 0;
  padding: 20px;
}
h2,
h3 {
  margin: 10px 0;
  color: #f0e6e2;
  text-align: center;
}
form {
  margin-bottom: 20px;
  text-align: center;
}

input[type="text"] {
  padding: 6px;
  border-radius: 4px;
  border: 1px solid #555;
  width: 350px;
  background: #1f1a19;
  color: #eddad4;
}
input[type="submit"] {
  padding: 6px 12px;
  background: #4a3d3a;
  color: #eddad4;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.player-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(255, 255, 255, 0.06) 100%
  );
  padding: 20px;
  box-shadow: inset 0 0 20px #0000005e;
  border: 1px solid #574b4b;
  width: fit-content;
  box-sizing: border-box;
  margin: auto;
}

.player-avatar {
  width: 128px;
  height: 128px;
  flex-shrink: 0;
  border: 1px solid #574b4b;
}

.player-info {
  margin: auto;
  flex-grow: 1;
}

.stats-columns {
  display: flex;
  gap: 40px; /* space between columns */
  margin-top: 12px;
}

.column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.season-table {
  margin-top: 20px;
  overflow: hidden;
  margin: 0px;
  box-shadow: inset 0 0 20px #0000005e;
  border: 1px solid #574b4b;
  margin: auto;
}
.season-table td {
  padding: 4px;
  text-align: center;
  border: ridge 1px #6d5f5b;
  width: 133px;
  height: 31px;
  cursor: pointer;
  border: ridge 2px #6d5f5b;
  background: linear-gradient( 180deg, rgba(0, 0, 0, 0.22) 0%, rgba(255, 255, 255, 0.08) 100% );
}
.season-table td:first-child {
  background: #1f1a19;
  width: 50px;
  border: ridge 1px #6d5f5b66;
}

.season-table td.rank-top10 {
  background: linear-gradient(
    45deg,
    #4a3200 0%,
    /* deep shadow */ #d4af37 10%,
    /* base gold */ #fff4c2 18%,
    /* bright highlight */ #c5a028 30%,
    /* mid gold */ #fff7d6 42%,
    /* strong highlight */ #e6c76b 55%,
    /* soft gold */ #fff4c2 65%,
    /* highlight streak */ #d4af37 80%,
    /* base gold */ #4a3200 100% /* deep shadow */
  );

  border: ridge 3px #e1bf52;
  color: rgba(56, 13, 0, 0.63);
  text-decoration: none;
  font-weight: bold;
  text-shadow: 1px 1px 0 #f0d99c;
}

.season-table td.rank-10-50 {
  border: ridge 3px #cacaca;
  background: linear-gradient(
    45deg,
    #2e2e2e 0%,
    /* deep shadow */ #c0c0c0 10%,
    /* base silver */ #f5f5f5 18%,
    /* bright highlight */ #a9a9a9 30%,
    /* mid silver */ #ffffff 42%,
    /* strong highlight */ #dcdcdc 55%,
    /* soft silver */ #f5f5f5 65%,
    /* highlight streak */ #c0c0c0 80%,
    /* base silver */ #2e2e2e 100% /* deep shadow */
  );

  color: #828282;
  font-weight: bold;
  text-shadow: 1px 1px 0 #ffffff;
}
.season-table td.rank-50-100 {
  border: ridge 3px #d08540;
  background: linear-gradient(
    45deg,
    #5a2e0f 0%,
    /* deep shadow */ #b87333 10%,
    /* base copper */ #ffcf9f 18%,
    /* bright highlight */ #cd7f32 30%,
    /* mid copper */ #ffd6b3 42%,
    /* strong highlight */ #d99a6c 55%,
    /* soft copper */ #ffcf9f 65%,
    /* highlight streak */ #b87333 80%,
    /* base copper */ #5a2e0f 100% /* deep shadow */
  );

  color: rgba(45, 00, 0, 0.55);
  text-decoration: none;
  font-weight: bold;
  text-shadow: 1px 1px 0 #dea173;
}
.season-table td.rank-100plus {
  border: ridge 2px #6d5f5b;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.22) 0%,
    rgba(255, 255, 255, 0.08) 100%
  );
}
.season-table td.rank-unplaced {
  color: #7b7575;
  border: ridge 2px #6d5f5b;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.22) 0%,
    rgba(255, 255, 255, 0.08) 100%
  );
}

.quote {
  font-style: italic;
  opacity: 0.8;
  margin-top: 15px;
  text-align: center;
}
p {
  margin: 0;
}
.nametag {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nametag .left {
  display: inline-flex;
  align-items: baseline;
  gap: 6px; /* space between name and rank */
}

.nametag a {
  color: #eddad4;
  text-decoration: none;
}
.nametag a:hover {
  text-decoration: underline;
}
</style>