.relay-arena {
  position: relative;
  width: 100%;
  height: clamp(300px, 33vw, 470px);
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  background: #2c3e47;
  color: #e8ead5;
  border-block: 1px solid #6c7e77;
}
.relay-arena[data-count='5'],
.relay-arena[data-count='6'] {
  height: clamp(390px, 33vw, 500px);
}
.relay-arena[data-count='7'],
.relay-arena[data-count='8'] {
  height: clamp(480px, 39vw, 570px);
}
.relay-arena canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.relay-arena .ra-labels {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.relay-arena .ra-seat {
  position: absolute;
  transform: translateX(-50%);
  width: max-content;
  min-width: 80px;
  max-width: min(20%, 195px);
  margin: 0;
  padding: 3px 6px;
  border: 1px solid #738b7d;
  box-shadow: 2px 2px 0 #21363c;
  color: #e8ead5;
  background-color: #26383d;
  text-align: center;
  font-family: inherit;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
}
.ra-seat[data-active] {
  border-color: #e8cb92;
  background-color: #34423c;
}
.ra-seat[data-winner] {
  border-color: #f1cd8c;
  background: #41473b;
}
.ra-seat[data-out] {
  border-color: #65736f;
  background-color: #304047;
  color: #c4c9bf;
}
.ra-name {
  display: block;
  font-weight: 650;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.ra-self {
  color: #b7dcc1;
  font-size: 0.88em;
  font-weight: 400;
  white-space: nowrap;
}
.ra-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin: 4px 0 1px;
  min-height: 10px;
}
.ra-hearts {
  display: inline-flex;
  gap: 1px;
}
.ra-hearts i {
  display: block;
  width: 8px;
  height: 7px;
  background: #64716f;
  clip-path: polygon(
    0 15%,
    15% 15%,
    15% 0,
    37% 0,
    37% 15%,
    63% 15%,
    63% 0,
    85% 0,
    85% 15%,
    100% 15%,
    100% 55%,
    85% 55%,
    85% 70%,
    69% 70%,
    69% 85%,
    57% 85%,
    57% 100%,
    43% 100%,
    43% 85%,
    30% 85%,
    30% 70%,
    15% 70%,
    15% 55%,
    0 55%
  );
}
.ra-hearts i.full {
  background: #efaa93;
}
.ra-gauge {
  display: block;
  width: 100%;
  height: 5px;
  margin-top: 2px;
  overflow: hidden;
  border: 1px solid #a1bbab;
  background: #15262c;
}
.ra-gauge i {
  display: block;
  height: 100%;
  background: #b3e0ac;
}
.ra-charge {
  color: #c1ddc5;
  font-size: 13px;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}
.ra-state {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: #cecfb8;
}
.ra-seat[data-winner] .ra-state {
  color: #f6d898;
}
@media (max-width: 600px) {
  .relay-arena {
    height: clamp(250px, 72vw, 322px);
  }
  .relay-arena[data-count='3'],
  .relay-arena[data-count='4'] {
    height: 305px;
  }
  .relay-arena[data-count='5'],
  .relay-arena[data-count='6'] {
    height: 409px;
  }
  .relay-arena[data-count='7'],
  .relay-arena[data-count='8'] {
    height: 484px;
  }
  .relay-arena[data-preview] {
    height: 213px;
  }
}
@container (max-width: 600px) {
  .relay-arena .ra-seat {
    min-width: 61px;
    max-width: 28.5%;
    font-size: 14px;
    padding: 2px 3px;
  }
  .relay-arena[data-dense] .ra-seat {
    max-width: 24%;
  }
  .relay-arena[data-dense] .ra-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ra-stats {
    gap: 2px;
    margin: 1px 0 0;
  }
  .ra-hearts i {
    width: 6px;
    height: 6px;
  }
  .ra-gauge {
    width: 100%;
    height: 4px;
  }
  .ra-charge,
  .ra-state {
    font-size: 12px;
  }
}
@media (min-width: 601px) and (max-height: 650px) {
  .relay-arena[data-count='1'],
  .relay-arena[data-count='2'] {
    height: 250px;
  }
}