.thirty-card {
  position: relative;
  container-type: inline-size;
  width: 100%;
}
.thirty-card > img {
  display: block;
  width: 100%;
  height: auto;
}
.thirty-period {
  position: absolute;
  left: 86.2%;
  top: 10.1%;
  width: 4.6%;
  height: 2.7%;
  color: #e51420;
  text-align: center;
  font: bold 2.65cqw/1 Arial, sans-serif;
}
.thirty-animals {
  position: absolute;
  left: 26%;
  height: 3.8%;
  display: flex;
  align-items: center;
  background: transparent;
}
.thirty-animals > * {
  flex: 0 0 5.3cqw;
  width: 5.3cqw;
  min-width: 0;
  background: transparent;
  text-align: center;
  font: bold 4cqw/1.1 "Microsoft YaHei", sans-serif;
  color: #20120c;
}
.thirty-numbers {
  position: absolute;
  left: 12%;
  top: 47.8%;
  width: 76%;
  height: 10.5%;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-rows: repeat(3, 1fr);
  align-items: center;
  background: #fff;
}
.thirty-numbers > * {
  min-width: 0;
  text-align: center;
  font: bold 3.7cqw/1.1 Arial, sans-serif;
  color: #a94300;
}
.thirty-card input,
.thirty-card select {
  width: 100%;
  padding: 0;
  margin: 0;
  height: 100%;
  border: 1px solid #8392dd;
  border-radius: 2px;
  background: transparent;
  box-sizing: border-box;
  appearance: none;
}
.thirty-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
}
.thirty-verse {
  position: absolute;
  left: 16.5%;
  top: 61%;
  width: 69%;
  height: 14.2%;
  box-sizing: border-box;
  padding: 2% 1%;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  align-items: center;
  background: linear-gradient(#fff, #facab8);
  border-radius: 0 0 28% 28%;
}
.thirty-verse > * {
  display: block;
  min-width: 0;
  text-align: center;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #141400;
  font: bold clamp(10px, 4.5cqw, 36px)/1.2 KaiTi, STKaiti, serif;
}
.thirty-card .thirty-verse input { background: #ffffffb3; font-size: 3.8cqw; }