/* Canonical Fam-Lange nine-pin renderer.
   Geometry invariant: one square coordinate system, identical X/Y step (15%).
   Consumers may change only --pin-renderer-size and --pin-diameter. */
.pin-renderer{
  --pin-renderer-size:150px;
  --pin-diameter:16%;
  position:relative;
  width:min(100%,var(--pin-renderer-size));
  aspect-ratio:1 / 1;
  margin-inline:auto;
  flex:0 0 auto;
}
.pin-renderer > :nth-child(-n+9){
  position:absolute;
  box-sizing:border-box;
  width:var(--pin-diameter);
  height:auto;
  aspect-ratio:1 / 1;
  transform:translate(-50%,-50%);
}
/* Player view: 1 is front/bottom, 9 is rear/top. Equal 15% X/Y pitch. */
.pin-renderer > :nth-child(1){left:50%;top:80%}
.pin-renderer > :nth-child(2){left:35%;top:65%}
.pin-renderer > :nth-child(3){left:65%;top:65%}
.pin-renderer > :nth-child(4){left:20%;top:50%}
.pin-renderer > :nth-child(5){left:50%;top:50%}
.pin-renderer > :nth-child(6){left:80%;top:50%}
.pin-renderer > :nth-child(7){left:35%;top:35%}
.pin-renderer > :nth-child(8){left:65%;top:35%}
.pin-renderer > :nth-child(9){left:50%;top:20%}