/* V47: the merge board sits on the wooden worktop; orders state only the ask. */

.merge-panel .board-wrap {
  filter: drop-shadow(0 2px 2px rgb(12 8 12 / 24%));
}

.shop .order-rail-ticket {
  grid-template-columns: 42px minmax(0, 1fr);
}

.shop .order-rail-ticket .order-line {
  align-items: center;
  font-weight: 700;
}

.shop .order-rail-ticket .order-name {
  min-width: 0;
}

.shop .order-rail-ticket .order-level {
  color: #ffd987;
  font-weight: 800;
  letter-spacing: .01em;
}

.shop .order-rail-ticket .patience {
  height: 6px;
}

@media (min-width: 721px) and (min-height: 500px) {
  .game-shell.phase-playing .merge-panel,
  .game-shell.phase-training .merge-panel {
    top: calc(4.63% + min(32.552vw, 500px) + 4px);
    bottom: 10px;
    align-items: start;
    transform: none;
  }

  .merge-panel .board-wrap {
    align-self: stretch;
    place-items: start center;
    padding-top: 3px;
  }

  .merge-panel .board {
    grid-template-columns: repeat(5, 44px);
    grid-template-rows: repeat(4, 44px);
    gap: 2px;
  }

  .merge-panel .cell {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 5px;
  }

  .merge-panel .cell img {
    width: 34px;
    height: 34px;
  }

  .merge-panel .purchase-dock,
  .merge-panel .mutation-dock {
    align-self: start;
    margin-top: 3px;
  }

  .shop .order-rail-slot {
    bottom: 3.4%;
  }

  .shop .order-rail-ticket .order-line {
    font-size: 12px;
  }

  .shop .order-rail-ticket .order-level {
    font-size: 10px;
  }
}

@media (min-width: 721px) and (min-height: 500px) and (max-aspect-ratio: 3 / 2) {
  .game-shell.phase-playing .merge-panel,
  .game-shell.phase-training .merge-panel {
    top: 382px;
    bottom: 18px;
  }
}

@media (max-width: 720px) and (orientation: portrait) {
  .shop .order-rail-slot,
  .shop .order-rail-ticket {
    width: 140px;
  }

  .shop .order-rail-ticket {
    grid-template-columns: 31px minmax(0, 1fr);
  }

  .shop .order-rail-ticket .order-line,
  .shop .order-rail-ticket .order-level {
    font-size: 11px;
  }
}

@media (max-height: 430px) and (orientation: landscape) {
  .shop .order-rail-slot,
  .shop .order-rail-ticket {
    width: 142px;
  }

  .shop .order-rail-ticket {
    grid-template-columns: 29px minmax(0, 1fr);
  }

  .shop .order-rail-ticket .order-line,
  .shop .order-rail-ticket .order-level {
    font-size: 11px;
  }
}