/* 相性占い（フォーム・カード内） */
.free-fortune-card-wrap:has(.free-fortune-card--aisyo) {
  --free-fortune-frame: #c48a62;
  --free-fortune-title: #a6724c;
  --free-fortune-pale: #f3e4d6;
}

.free-fortune-card--aisyo {
  --free-fortune-pale: #f3e4d6;
  --free-fortune-wash: #faf4ee;
}

/* 他カードと同じく 3/4 を維持 */
.free-fortune-card--aisyo.is-playing .free-fortune-card__play,
.free-fortune-card--aisyo.is-playing .free-fortune-card__play[hidden] {
  display: flex !important;
  padding: 12px 16px 16px;
  overflow: hidden;
}

.free-fortune-card__aisyo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
}

/* 自分／相手の境目をカード高さ50%に、占うボタンは相手欄とカード下辺の中間に */
.aisyo-form {
  display: grid;
  grid-template-rows: calc(50% - 11px) auto auto minmax(0, 1fr);
  align-items: stretch;
  width: min(92%, 300px);
  height: 100%;
  margin: 0 auto;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

/* 上段：案内文（空きスペース中央）＋自分欄（下端寄せ） */
.aisyo-form__top {
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.aisyo-form__cue {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 0;
}

.aisyo-form__fieldset[data-aisyo-ymd="other"] {
  grid-row: 2;
  margin-top: 22px;
}

.aisyo-form__fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.aisyo-form__label {
  display: block;
  width: 100%;
  margin: 0 0 10px;
  padding: 0;
  font-size: 13.5px;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  color: #a6724c;
  text-align: center;
  line-height: 1.2;
}

.aisyo-form__ymd {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  align-items: stretch;
}

.aisyo-form__cell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

.aisyo-form__unit {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: #6a5848;
  line-height: 1;
  white-space: nowrap;
}

.aisyo-form__select {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  margin: 0;
  padding: 8px 22px 8px 4px;
  border: 1px solid #d2c0ae;
  border-radius: 6px;
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg, transparent 50%, #8a6a52 50%),
    linear-gradient(135deg, #8a6a52 50%, transparent 50%);
  background-position:
    calc(100% - 11px) calc(50% - 2px),
    calc(100% - 6px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: #2a1810;
  font: inherit;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-align: center;
  text-align-last: center;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.aisyo-form__select:focus {
  outline: 2px solid rgba(196, 138, 98, 0.4);
  outline-offset: 1px;
}

.aisyo-form__error {
  grid-row: 3;
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #a85868;
  text-align: center;
}

.aisyo-form__error[hidden] {
  display: none !important;
}

.free-fortune-card__aisyo .tarot-fortune__submit,
.aisyo-form [data-aisyo-submit] {
  grid-row: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  justify-self: center;
  width: auto;
  max-width: none;
  min-width: 148px;
  height: auto;
  min-height: 48px;
  margin: 0 auto;
  padding: 11px 22px;
  border: none;
  border-radius: 999px;
  background: #c48a62;
  color: #fffaf5;
  font-size: 16px;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  line-height: 1.15;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.free-fortune-card__aisyo .tarot-fortune__submit:hover,
.free-fortune-card__aisyo .tarot-fortune__submit:focus-visible,
.aisyo-form [data-aisyo-submit]:hover,
.aisyo-form [data-aisyo-submit]:focus-visible {
  opacity: 0.88;
}

.aisyo-cast__casting {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.aisyo-cast__casting[hidden] {
  display: none;
}

.aisyo-cast__casting-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #c48a62;
}

.aisyo-cast__casting-dots span {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.3;
  transform: scale(0.9);
  animation: tarot-submit-dot 1.35s ease-in-out infinite;
}

.aisyo-cast__casting-dots span:nth-child(2) {
  animation-delay: 0.18s;
}

.aisyo-cast__casting-dots span:nth-child(3) {
  animation-delay: 0.36s;
}

.free-fortune-hub--aisyo {
  --hub-frame: #c48a62;
}

@media (min-width: 600px) {
  .aisyo-form {
    width: min(88%, 320px);
    grid-template-rows: calc(50% - 13px) auto auto minmax(0, 1fr);
  }

  .aisyo-form__fieldset[data-aisyo-ymd="other"] {
    margin-top: 26px;
  }

  .aisyo-form__label {
    font-size: 14.5px;
    margin-bottom: 12px;
  }

  .aisyo-form__ymd {
    gap: 14px;
  }

  .aisyo-form__select {
    min-height: 50px;
    font-size: 17px;
  }

  .aisyo-form__unit {
    font-size: 14px;
  }

  .free-fortune-card__aisyo .tarot-fortune__submit,
  .aisyo-form [data-aisyo-submit] {
    min-height: 52px;
    font-size: 17px;
  }
}