.spr-game {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: var(--space-x-small);

  &:not(.spr-game--short) {
    @media (min-width: 600px) {
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      padding: var(--size-025);
      border: 0.0625rem solid var(--color-gray-20);
      border-radius: 1.5rem;
      box-shadow: var(--shadow-1);
    }
  }
}

.spr-game.spr-game--has-url {
  transition: all 0.2s ease;

  &:hover {
    background-color: var(--color-secondary-light);
  }
}

.spr-game__player {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-grow: 1;
  align-items: center;
  width: 100%;
  gap: 0.75rem;

  .spr-game:not(.spr-game--short) & {
    @media (min-width: 600px) {
      width: 50%;
    }
  }
}

.spr-game__player.starts-with-black {
  .spr-game:not(.spr-game--short) & {
    @media (min-width: 600px) {
      flex-direction: row-reverse;
    }
  }
}

/* avatar (2.125rem) + flag (1.5625rem) + score (3.5rem) + gap (2.25rem) */
.spr-game__player-avatar {
  overflow: hidden;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background-color: var(--color-secondary);

  .spr-game:not(.spr-game--short) & {
    @media (min-width: 600px) {
      width: 2.125rem;
      height: 2.125rem;
    }
  }

  img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

.spr-game__player-flag {
  flex: none;
  width: 1.5625rem;

  img {
    width: 100%;
    height: auto;
    aspect-ratio: 105 / 68;
  }
}

.spr-game__player-name {
  flex-grow: 1;
  width: calc(100% - 2.125rem - 1.5625rem - 3.5rem - 2.25rem);
}

.spr-game__player-name a {
  display: block;
  overflow: hidden;
  width: calc(100%);
  white-space: nowrap;
  text-decoration: none;
  text-overflow: ellipsis;
  color: var(--color-text);

  .spr-game.spr-game--short & {
    font-size: 0.875rem;
  }

  &:hover {
    text-decoration: underline;
    text-underline-offset: 0.25rem;
  }
}

.spr-game.spr-game--has-url .spr-game__player-name a {
  pointer-events: none;
}

.spr-game__player.starts-with-black .spr-game__player-name {
  .spr-game:not(.spr-game--short) & {
    @media (min-width: 600px) {
      text-align: right;
    }
  }
}

.spr-game__player-score {
  position: relative;
  width: 1.5rem;
  text-align: center;
  font-size: var(--font-size-xxs);
  line-height: var(--line-height-heading-5);

  .spr-game:not(.spr-game--short) & {
    @media (min-width: 600px) {
      width: 3.5rem;
      font-size: var(--font-size-xs);
    }
  }

  .spr-game.spr-game--short & {
    font-size: 1rem;
  }
}

.spr-game__player.starts-with-white .spr-game__player-score {
  &::after {
    position: absolute;
    right: 0.25rem;
    bottom: -0.625rem;
    display: block;
    width: 0;
    height: 0;
    content: "";
    border-top: solid 0.4375rem transparent;
    border-bottom: solid 0.4375rem transparent;
    border-left: solid 0.75rem var(--color-success);
  }

  .spr-game.spr-game--short &::after {
    right: 0.5rem;
    bottom: -0.4rem;
    border-top: solid 0.3rem transparent;
    border-bottom: solid 0.3rem transparent;
    border-left: solid 0.45rem var(--color-success);
  }

  @media (min-width: 600px) {
    .spr-game:not(.spr-game--short) & {
      &::after {
        top: 50%;
        right: 0;
        bottom: auto;
        content: "";
        transform: translateY(-50%) translateX(50%);
      }
    }
  }
}

.spr-game__player.starts-with-white .spr-game__player-score--filled {
  &::after {
    content: none;
  }

  @media (min-width: 600px) {
    .spr-game:not(.spr-game--short) & {
      &::after {
        position: absolute;
        top: calc(var(--size-025) * -1);
        right: -0.0625rem;
        bottom: calc(var(--size-025) * -1);
        display: block;
        width: 0.125rem;
        height: calc(100% + (var(--size-025) * 2));
        content: "";
        transform: none;
        border: none;
        background-color: var(--color-gray-20);
      }
    }
  }
}

.spr-game__url {
  position: absolute;
  z-index: 1;
  display: block;
  flex: none;
  pointer-events: all;
  inset: 0;
}