#game-area[data-game="briscola"] {
  &[data-playing] .card[data-position="hand"][data-player="self"]::after {
    display: block;
  }

  div {
    --unit: min(
      calc(
        100dvw /
        (
          var(--card-height-raw) +
          var(--card-width-raw) *
          3 +
          var(--gap-raw) *
          5 +
          var(--deck-shadow-max-width-raw)
        )
      ),
      calc(
        100dvh /
        (
          var(--card-height-raw) *
          4 +
          var(--gap-raw) *
          4 +
          var(--deck-shadow-max-width-raw) *
          2
        )
      )
    );

    @media (orientation: portrait) {
      --center-x: calc(
        50dvw +
        (var(--left) + var(--card-height) - var(--card-width)) /
        2
      );
    }

    &.card {
      &[data-position="deck"] {
        top: calc(var(--center-y) - var(--deck-shadow-width) / 2);
        left: var(--left);
      }
      &[data-starting-position="deck"] {
        --card-starting-x: var(--left);
        --card-starting-y: calc(var(--center-y) - var(--deck-shadow-width) / 2);
        --card-starting-rotation: 0;
        &[data-position="briscola"] {
          --card-starting-rotation: 1;
        }
      }

      &[data-position="briscola"] {
        top: var(--center-y);
        left: calc(var(--left) + var(--card-width) / 2);
        --card-rotation: 1;
        z-index: -1;
      }

      &[data-position="playing-area"] {
        top: calc(
          var(--center-y) +
          var(--card-playing-area-offsets-sign) *
          var(--card-height) /
          4
        );
        left: calc(
          var(--center-x) +
          var(--card-playing-area-offsets-sign) *
          var(--card-width) /
          4
        );
        z-index: var(--card-field-position);
        &[data-field-player="opponent"] {
          --card-playing-area-offsets-sign: -1;
        }
        &[data-field-player="self"] {
          --card-playing-area-offsets-sign: 1;
        }
      }

      &[data-position="hand"] {
        left: calc(
          var(--center-x) +
          (var(--card-field-position) - (var(--card-field-size) - 1) / 2) *
          (var(--gap) + var(--card-width))
        );
        &[data-player="opponent"] {
          top: var(--top);
        }
        &[data-player="self"] {
          top: var(--bottom);
        }
      }

      &[data-position="points"] {
        --card-rotation: 1;
        --deck-writing-mode: vertical-rl;
        left: calc(var(--left) + var(--rotation-diff));
        &[data-player="opponent"] {
          top: calc(var(--top) - var(--rotation-diff));
        }
        &[data-player="self"] {
          top: calc(var(--bottom) - var(--deck-shadow-width) + var(--rotation-diff));
        }
      }
    }

    &.name-tag {
      left: var(--gap);
      &[data-player="opponent"] {
        top: calc(var(--gap) * 2 + var(--card-width) + var(--deck-shadow-width));
      }
      &[data-player="self"] {
        bottom: calc(var(--gap) * 2 + var(--card-width) + var(--deck-shadow-width));
      }
    }
  }
}