.round-summary {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  backdrop-filter: var(--glass-blur);
  padding: var(--space-6) var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: var(--max-width-form);
  width: 100%;
  margin: 0 auto;
  align-self: start;
  font-size: var(--font-em-md);

  & > .heading {
    display: flex;
    align-items: center;
    gap: var(--space-8);
  }

  & > .heading > .title {
    font-weight: var(--font-weight-bold);
    opacity: 0.8;
  }

  & > .heading > .outcome {
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-full);
    padding: 0.1em 0.7em;
    font-size: var(--font-em-md);

    &.-made {
      background: var(--color-success-alpha-30);
      color: var(--color-success);
      border: 1px solid var(--color-success);
    }

    &.-set {
      background: var(--color-danger-alpha-20);
      color: var(--color-danger);
      border: 1px solid var(--color-danger);
    }
  }

  & > .heading > .bid {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    & > strong {
      color: var(--color-accent);
    }
  }

  & > .teams {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }

  & > .teams > .team {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "name taken score";
    align-items: baseline;
    column-gap: var(--space-6);
    padding: var(--space-3) var(--space-8);
    background: var(--color-black-alpha-20);
    border-radius: var(--radius-md);
    border: 1px solid transparent;

    &.-bidding {
      border-color: var(--color-accent-alpha-40);
    }

    & > .name {
      grid-area: name;
      font-weight: var(--font-weight-semibold);
    }

    & > .taken {
      grid-area: taken;
      font-size: var(--font-em-md);
      opacity: 0.7;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    & > .score {
      grid-area: score;
      font-size: var(--font-em-lg);
      font-weight: var(--font-weight-bold);

      &.-positive {
        color: var(--color-success);
      }

      &.-negative {
        color: var(--color-danger);
      }
    }
  }
}

@media (min-width: 768px) {
  .round-summary {
    padding: var(--space-8) var(--space-12);
    gap: var(--space-6);
    font-size: var(--font-em-base);

    & > .heading {
      flex-wrap: wrap;
      justify-content: space-between;
      row-gap: var(--space-6);
    }

    & > .heading > .bid {
      order: 1;
      flex-basis: 100%;
    }

    & > .teams {
      gap: var(--space-6);
    }

    & > .teams > .team {
      grid-template-columns: 1fr auto;
      grid-template-areas: "name score" "taken score";
      align-items: center;
      column-gap: var(--space-8);
      padding: var(--space-6) var(--space-10);

      & > .score {
        font-size: var(--font-em-xl);
      }
    }
  }
}