.play-area {
  background: var(--color-black-alpha-20);
  border-radius: var(--radius-3xl);
  border: 2px solid var(--glass-border);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  gap: var(--space-4);
  padding: var(--space-15);

  & > .card {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 0;
    position: relative;

    & > img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      display: block;
    }

    & > .points {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 0.15em 0.55em;
      border-radius: var(--radius-full);
      font-weight: var(--font-weight-bold);
      font-size: clamp(0.8em, 3.5vw, 1.2em);
      background: var(--color-primary-dark);
      border: 2px solid currentColor;
      box-shadow: var(--shadow-md);
      white-space: nowrap;

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

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

    &.-winner > img {
      border-radius: var(--radius-md);
      box-shadow: var(--glow-accent);
    }

    &.-top {
      grid-column: 2;
      grid-row: 1 / 3;
    }

    &.-bottom {
      grid-column: 2;
      grid-row: 3 / 5;
    }

    &.-left {
      grid-column: 1;
      grid-row: 2 / 4;
    }

    &.-right {
      grid-column: 3;
      grid-row: 2 / 4;
    }
  }

  &.-last > .card:not(.-winner) {
    opacity: 0.5;
  }
}