/* rules */
.rules h2 {
  font-family: "Syntax";
  font-variant: small-caps;
  text-transform: lowercase;
  font-size: 1.2em;
}

.rules h3 {
  padding-top: .5em;
}

.rules figure img {
  max-width: 90%;
}

/* content section */
.content-figure {
  display: flex;
}

.content-figure figure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
}

.content-figure figcaption {
  flex: 100% 0 0;
  text-align: center;
}

.content-figure .card {
  transform: scale(.2) translate(-200%, -200%);
}
.content-figure figure > div {
  width: calc(0.2 * 70mm);
  height: calc(0.2 * 100mm);
  border: 1px solid #CCC;
  float: left;
  margin: 0px 5px;
}

/* setup section */
.setup-figure {
  position: relative;
  aspect-ratio: 2;
}
.setup-figure figure:nth-child(2) {
  position: absolute;
  transform: rotate(90deg);
  left: 0;
  top: 30%;
}
.setup-figure figure:nth-child(3) {
  position: absolute;
  bottom: 0;
  left: 33%;
  transform: translate(-50%);
}
.setup-figure figure:nth-child(4) {
  position: absolute;
  bottom: 0;
  left: 66%;
  transform: translate(-50%);
}
.setup-figure figure:nth-child(5) {
  position: absolute;
  transform: rotate(-90deg);
  right: 0;
  top: 30%;
}

.setup-figure figure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
}

.setup-figure .card {
  transform: scale(.12) translate(-367%, -367%);
}

.setup-figure figure > div {
  width: calc(0.12 * 70mm);
  height: calc(0.12 * 100mm);
  border: 1px solid #CCC;
  background-color: #FFF;
  float: left;
  margin: 0px 3px;
}

.setup-figure figure > div.empty {
  border: 1px dashed #666;
}

.hand {
  padding-top: calc(1.3 * 0.12 * 89mm);
  /* border: 1px solid red; */
}

.hand > div:nth-child(1)  {
  transform: translate(200%) rotate(-14deg);
}
.hand > div:nth-child(2)  {
  transform: translate(100%) rotate(-7deg);
}
.hand > div:nth-child(4)  {
  transform: translate(-100%) rotate(7deg);
}
.hand > div:nth-child(5)  {
  transform: translate(-250%, -130%);
}
.hand > div:nth-child(6)  {
  transform: translate(-200%);
}

/* numbers */
/* top row */
.setup-figure figure > div {
  position: relative;
}
.setup-figure figure > div:before {
  position: absolute;
  font-size: 1.5em;
}
.setup-figure figure:first-child .empty:before {
  content: "③";
  left: -95%;
  top: 20%;
}

.setup-figure figure:first-child :nth-child(2):before {
  content: "①";
  bottom: -80%;
  left: 15%;
}

.setup-figure figure:first-child :nth-child(3):before {
  content: "②";
  bottom: -90%;
  left: 15%;
  border-top: 1px solid #222;
  width: 330%;
  text-align: center;
}

/* hand */
.setup-figure figure:nth-child(3) :nth-child(3):before {
  content: "④";
  left: -150%;
  top: 20%;  
}
.setup-figure figure:nth-child(3) :last-child:before {
  content: "⑤";
  right: -95%;
  top: 20%;  
}
.setup-figure figure:nth-child(3) .empty:before {
  content: "⑥";
  left: -95%;
  top: 20%;  
}

/* source section */
.source-figure {
  transform: scale(.9) translate(-12%, -0%);
  position: relative;
}

.source-figure > span {
  position: absolute;
  left: 95%;
  font-size: 2em;
  z-index: 5;
}
.source-figure > span:first-child {
  top: 32%;
}
.source-figure > span:nth-child(2) {
  top: 70%;
}
.source-figure > span:nth-child(3) {
  bottom: 12%;
}

.source-figure section {
  border: none;
  position: relative;
}

/* credits section */
.credits {
  text-align: center;
}

.credits img {
  width: 150px;
  display: inline;
  margin: 0 10px;
}

@media print {
  /* RULES */
  @page {
    size: A5;
    margin: 10mm;
    @top-left {
      content: counter(page);
    }
  }
  body > header menu, body > header form, body > header h1 small {
    display: none;
  }
  .rules section {
    /* break-inside: avoid; */
    /* width: 11cm !important; */
  }

  .rules .page-break {
    page-break-before: always;
  }
}