/* ── 卡片元件（正面／背面共用） ─────────────────────────────── */

/* 卡片外殼：正方形、象牙底、圓角 */
.card-face,
.card-back {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
  background:
    radial-gradient(115% 115% at 50% 42%, var(--ivory) 55%, var(--ivory-deep) 100%);
  box-shadow: var(--shadow-card-soft);
}

/* SVG 金框圖層 */
.card-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 正面內容 */
.card-face__content {
  position: absolute;
  inset: 9%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}

.card-face__num {
  font-size: var(--text-num);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--gold-dark);
  line-height: 1;
  margin-top: 2%;
}

.card-face__text {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 4%;
  font-size: var(--text-card);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.12em;
  color: var(--ink);
}

.card-face__heart {
  width: 8.5%;
  aspect-ratio: 1;
  margin-bottom: 1.5%;
  color: var(--gold-mid);
}

/* 背面：中央愛心勳章 */
.card-back {
  background:
    radial-gradient(110% 110% at 50% 45%, var(--ivory-deep) 40%, oklch(88% 0.045 86) 100%);
}

.card-back__medal {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.card-back__medal svg {
  width: 26%;
  aspect-ratio: 1;
  color: var(--gold-mid);
  filter: drop-shadow(0 1px 2px oklch(50% 0.08 80 / 0.35));
}