sendou.ink/app/styles/play-layout.css

.play-layout__link-container {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
  margin-block-end: var(--s-6);
}

.play-layout__link {
  font-size: var(--fonts-xs);
  font-weight: var(--body);
}

.play-layout__link.active {
  color: var(--theme-secondary);
}

.play__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  background-color: var(--bg-lighter);
  border-radius: var(--rounded);
  gap: var(--s-2);
  max-inline-size: 24rem;
  padding-block-end: var(--s-3);
  padding-block-start: var(--s-2);
  padding-inline: var(--s-2);
}

.play__card__ranked-text {
  background-color: var(--bg-lighter);
  border-radius: var(--rounded);
  color: var(--theme-secondary);
  font-size: var(--fonts-xxs);
  font-weight: var(--semi-bold);
  margin-block-start: -17px;
  padding-block: var(--s-0-5);
  padding-inline: var(--s-2);
}

.play__card__ranked-text.ranked {
  color: var(--theme);
}

.play__card__mmr {
  font-size: var(--fonts-sm);
  font-weight: var(--bold);
}

.play__card__button-small {
  font-size: var(--fonts-xxs) !important;
}

.play__card__members {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
}

.play__card__member-card {
  display: flex;
  min-width: calc(50% - var(--s-4));
  max-width: calc(50% - var(--s-4));
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-darker);
  border-radius: var(--rounded);
  overflow-x: hidden;
  padding-block-end: var(--s-1);
  padding-block-start: var(--s-2);
}

.play__card__member-name {
  font-size: var(--fonts-xs);
  font-weight: var(--semi-bold);
  margin-block-start: 1px;
  white-space: nowrap;
}

.play__card__captain {
  color: var(--theme-info);
  font-weight: var(--bold);
}

.play__card__member-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--text-color);
}

.play__card__member-mmr {
  margin-top: -4px;
  font-size: var(--fonts-xxs);
}

.play__card__mmr-relation-bar__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
}

.play__card__mmr-relation-bar__label {
  color: var(--text-lighter);
  font-size: var(--fonts-xxs);
}

.play__card__mmr-relation-bar {
  display: grid;
  width: 10rem;
  height: 1rem;
  border-radius: var(--rounded);
  grid-template-columns: repeat(7, 1fr);
}

.play__card__mmr-relation-bar__1 {
  background-color: green;
  border-end-start-radius: var(--rounded);
  border-start-start-radius: var(--rounded);
  opacity: 0.4;
}

.play__card__mmr-relation-bar__2 {
  background-color: rgb(80 241 80);
  opacity: 0.4;
}

.play__card__mmr-relation-bar__3 {
  background-color: rgb(184 240 100);
  opacity: 0.4;
}

.play__card__mmr-relation-bar__4 {
  background-color: yellow;
  opacity: 0.4;
}

.play__card__mmr-relation-bar__5 {
  background-color: rgb(247 192 92);
  opacity: 0.4;
}

.play__card__mmr-relation-bar__6 {
  background-color: rgb(226 111 69);
  opacity: 0.4;
}

.play__card__mmr-relation-bar__7 {
  background-color: red;
  border-end-end-radius: var(--rounded);
  border-start-end-radius: var(--rounded);
  opacity: 0.4;
}

.play__card__mmr-relation-bar__active {
  opacity: 1;
}

.play__card__mmr-relation-bar__indicator {
  display: grid;
  width: 1.1rem;
  width: 100%;
  height: 100%;
  place-items: center;
}

.play__card__replay {
  color: var(--theme-info);
  font-size: var(--fonts-sm);
  font-weight: var(--semi-bold);
}

.play__card__member-power {
  display: flex;
  margin-top: -4px;
  font-size: var(--fonts-xxs);
  gap: var(--s-1);
}

.play__card__member-weapons {
  display: flex;
  gap: var(--s-1);
  margin-block-end: var(--s-1);
}

.play__card__info {
  margin-block-start: auto;
}

.play__card__member-weapon {
  width: 1.5rem;
  height: 1.5rem;
}

.play__card__member-power.league {
  filter: hue-rotate(180deg);
}