.arena-page
{
  min-height:100svh
}

.arena-main
{
  width:min(1180px,calc(100% - 48px));
  margin:auto;
  padding:58px 0 80px
}

.arena-heading
{
  max-width:760px;
  margin-bottom:30px
}

.arena-heading h1
{
  margin:0;
  font:500 clamp(40px,5vw,58px)/1 "Cormorant Garamond",serif
}

.arena-heading>p:last-child
{
  color:var(--color-cyan-pale);
  line-height:1.6
}

.arena-connect
{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-bottom:24px;
  padding:22px 24px;
  border:1px solid var(--color-cyan-50);
  background:linear-gradient(135deg,var(--color-forest),var(--color-background));
  box-shadow:0 0 28px var(--color-mint-soft)
}

.arena-connect strong
{
  font:600 25px/1 "Cormorant Garamond",serif
}

.arena-connect p
{
  margin:7px 0 0;
  color:var(--color-cyan-pale)
}

.arena-weights
{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-bottom:16px
}

.arena-weights span
{
  padding:7px 11px;
  border:1px solid var(--color-mint-soft);
  color:var(--color-cyan-pale);
  font-size:11px
}

.arena-table
{
  overflow-x:auto;
  border:1px solid var(--color-mint-soft);
  background:var(--color-teal)
}

.arena-row
{
  display:grid;
  grid-template-columns:70px minmax(220px,1fr) repeat(5,minmax(82px,110px));
  min-width:820px;
  align-items:center;
  border-bottom:1px solid var(--color-mint-soft)
}

.arena-row:last-child
{
  border-bottom:0
}

.arena-row>*
{
  padding:17px 15px;
  text-align:center
}

.arena-row>*:nth-child(2)
{
  text-align:left
}

.arena-row--head
{
  color:var(--color-cyan-pale);
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase
}

.arena-row.is-current
{
  background:var(--color-mint-soft);
  box-shadow:inset 3px 0 var(--color-cyan)
}

.arena-player
{
  color:var(--color-white);
  font:600 20px/1 "Cormorant Garamond",serif
}

.arena-player--blurred
{
  filter: blur(5px);
  user-select: none;
}

@media(max-width:700px)
{
  .arena-main
  {
    width:min(100% - 24px,600px);
    padding-top:38px
  }

  .arena-connect
  {
    align-items:flex-start;
    flex-direction:column
  }

  .arena-connect a
  {
    width:100%;
    text-align:center
  }

}