.paytable {
  max-width: calc(var(--font-size-normal) * 50);
  margin-left: auto;
  margin-right: auto;
  color: #ffffff;
  font-family: var(--default-font-family--regular);

  .divider {
    width: 100%;
  }

  .section {
    margin: calc(var(--font-size-normal) * 1.2) auto;
    width: 80%;
  }

  .section:last-child {
    margin-bottom: 0;
  }

  h3 {
    display: inline;
    font-size: calc(var(--font-size-normal) * 2);
    font-family: var(--title-font-family, var(--default-font-family--bold));
    text-align: center;
    text-transform: uppercase;
    background: var(--title-color);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 300;
  }

  img {
    user-select: none;
    -webkit-user-drag: none;
    max-width: 80%;
  }
}

.paytable-rules {
  margin-top: calc(var(--font-size-normal) * 2.5);

  .ul--0 {
    list-style: disc;
    margin-top: calc(var(--font-size-normal) * 1);
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  li {
    font-size: calc(var(--font-size-normal));
    text-align: center;
    margin: calc(var(--font-size-normal) * 0.5) 0;
    color: var(--text-color);
  }
}

.paytable-info {
  p {
    font-size: calc(var(--font-size-normal));
    text-align: center;
    margin: calc(var(--font-size-normal) * 1) 0;
    color: var(--text-color);
  }

  .current-bet {
    font-size: calc(var(--font-size-normal) * 1.2);
    font-family: var(--title-font-family);
    margin-top: calc(var(--font-size-normal) * 0.5);
    margin-bottom: calc(var(--font-size-normal) * 0.5);
    text-transform: uppercase;
  }

  .image--centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .header-section {
    img {
      width: calc(var(--font-size-normal) * 15);
    }
  }

  .feature-image {
    width: calc(var(--font-size-normal) * 30);
    margin-top: calc(var(--font-size-normal) * 1);
    margin-bottom: calc(var(--font-size-normal) * 1);
  }

  .small-feature-image {
    width: calc(var(--font-size-normal) * 7);
    margin-top: calc(var(--font-size-normal) * 1);
    margin-bottom: calc(var(--font-size-normal) * 1);
  }

  .buy-feature-button-preview {
    display: flex;
    justify-content: center;
    margin: calc(var(--font-size-normal) * 1) 0;

    .buy-feature-preview {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: calc(var(--font-size-normal) * 0.5);
      border-radius: calc(var(--font-size-normal) * 10);
      background: linear-gradient(to bottom, #474747 16%, #383838 47%, #303030 53%, #1f1f1f 72%, #191919 85%);
      padding: calc(var(--font-size-normal) * 0.45) calc(var(--font-size-normal) * 1.2);

      &__cart {
        width: calc(var(--font-size-normal) * 1.3);
        height: calc(var(--font-size-normal) * 1.3);
        flex-shrink: 0;
      }

      &__text {
        color: #afafaf;
        font-family: 'robotoblack', sans-serif;
        font-size: calc(var(--font-size-normal) * 1);
        letter-spacing: 0.1em;
        white-space: nowrap;
      }
    }
  }

  .image-zoom-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
  }

  .image-zoom-container .feature-image {
    width: calc(var(--font-size-normal) * 35);
    max-width: none;
    margin-top: calc(var(--font-size-normal) * -4.5);
    margin-bottom: calc(var(--font-size-normal) * -3);
    margin-left: 0;
    margin-right: 0;
    flex-shrink: 0;
  }

  .image-zoom-container .max-win {
    margin-top: calc(var(--font-size-normal) * -6.5);
    margin-bottom: calc(var(--font-size-normal) * -4);
  }

  .image-zoom-container .progress {
    width: calc(var(--font-size-normal) * 45);
    margin-top: calc(var(--font-size-normal) * -7.5);
    margin-bottom: calc(var(--font-size-normal) * -11);
  }

  .image-zoom-container .free-spins-enhancer {
    padding-left: calc(var(--font-size-normal) * 1.5);
    margin-top: calc(var(--font-size-normal) * -4.5);
    margin-bottom: calc(var(--font-size-normal) * -3);
  }

  .image-zoom-container .jackpot {
    width: calc(var(--font-size-normal) * 45);
    margin-top: calc(var(--font-size-normal) * -6.5);
    margin-bottom: calc(var(--font-size-normal) * -7);
  }

  .image-zoom-container .bonus-symbol {
    width: calc(var(--font-size-normal) * 45);
    margin-top: calc(var(--font-size-normal) * -10);
    margin-bottom: calc(var(--font-size-normal) * -10);
  }

  .image-zoom-container .mystery-bonus {
    width: calc(var(--font-size-normal) * 45);
    margin-bottom: calc(var(--font-size-normal) * -7);
  }

  .symbol-payouts {
    width: 100%;
  }

  .symbol-payouts__tier {
    display: flex;
    justify-content: center;
    padding-bottom: calc(var(--font-size-normal) * 1.5);
    flex-wrap: wrap;
    row-gap: calc(var(--font-size-normal) * 1);
  }

  .symbol-payouts__tier:last-child {
    padding-bottom: 0;
  }

  .symbol-payout {
    font-family: var(--title-font-family);
    padding-left: calc(var(--font-size-normal) * 0.5);
    padding-right: calc(var(--font-size-normal) * 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }

  .symbol-payouts__tier--0 .symbol-payout__image {
    width: calc(var(--font-size-normal) * 6.8);
  }

  .symbol-payouts__tier--1 .symbol-payout__image {
    width: calc(var(--font-size-normal) * 6.2);
  }

  .symbol-payouts__tier--2 .symbol-payout__image {
    width: calc(var(--font-size-normal) * 5);
  }

  .symbol-payouts__tier--3 .symbol-payout__image {
    width: calc(var(--font-size-normal) * 5.2);
  }

  .symbol-payout__values {
    border-collapse: collapse;
    margin: calc(var(--font-size-normal) * 0.5) auto 0 auto;

    tr {
      line-height: 1.1;
    }

    td {
      vertical-align: middle;
      padding: calc(var(--font-size-normal) * 0.15) 0;
      white-space: nowrap;
    }

    td:first-child {
      text-align: right;
      padding-right: calc(var(--font-size-normal) * 0.35);
    }

    td:last-child {
      text-align: left;
      color: var(--text-color);

      &::before {
        content: "•";
        display: inline-block;
        margin-right: calc(var(--font-size-normal) * 0.35);
        color: var(--text-color);
      }
    }
  }

  .symbol-payout__quantity {
    font-size: var(--font-size-normal);
    color: var(--symbol-color);
  }

  .symbol-payout--h1, .symbol-payout--l5 { --symbol-color: #e02de0; }
  .symbol-payout--h2, .symbol-payout--l6 { --symbol-color: #ffb021; }

  .symbol-payout--h3, .symbol-payout--l7 { --symbol-color: #98e02d; }
  .symbol-payout--h4, .symbol-payout--l8 { --symbol-color: #36baff; }

  .symbol-payout__amount {
    color: var(--text-color);
    font-size: var(--font-size-normal);
  }

  .flex-container {
    display: flex;
    justify-content: space-around;
    flex-flow: row wrap;
    align-content: stretch;
    width: 100%;
    gap: calc(var(--font-size-normal) * 0.35) 0;
  }

  .paylines {
    display: flex;
    justify-content: space-around;
    flex-flow: row wrap;
    gap: calc(var(--font-size-normal) * 2) 0;
    margin-top: calc(var(--font-size-normal) * 1);

    .flex-container {
      width: calc(var(--font-size-normal) * 5) !important;
      margin: 0 calc(var(--font-size-normal) * 0.35);
    }

    .number {
      color: var(--paylines-number-color);
      position: relative;
      text-align: center;
      width: 100%;
      line-height: normal;
      user-select: none;
      font-family: var(--default-font-family--regular);
      font-size: calc(var(--font-size-normal) * 0.8);
      font-weight: 300;
      margin: 0;
    }

    .square {
      width: calc(var(--font-size-normal) * 1);
      height: calc(var(--font-size-normal) * 1);
      background-color: #545250;
      border: 1px solid black;

      -webkit-background-clip: padding-box;
      background-clip: padding-box;

      &.colored {
        background-color: #fcb101;
      }
    }
  }
}