/* src/frontend/css/scoreboard.css */
.page.scoreboard {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 1rem;

  & .score-row {
    display: flex;
    flex-direction: row;
    gap: 1rem;

    & > * {
      text-align: center;
      border-radius: 1rem;
      padding: 2rem;
    }

    & .score-user {
      background-color: var(--accent);
      width: 15rem;
    }

    & .score-category {
      position: relative;
      border: 1px solid var(--completion);
      overflow: hidden;
      z-index: 10;
      flex-grow: 1;

      & .score-completion {
        background-color: var(--completion);
        position: absolute;
        z-index: -1;
        top: 0;
        bottom: 0;
        left: 0;
      }

      & .score-lost {
        background-color: var(--hinting);
        position: absolute;
        z-index: -1;
        top: 0;
        bottom: 0;
        right: 0;
      }
    }
  }
}