/* ============================================================
   BỘ THẺ HẠT GIỐNG NỘI TÂM — giao diện thẻ 2 mặt (lật được)
   Bám sát thẻ mẫu: nền trắng ngà, viền vàng, 2 font thương hiệu.
   ============================================================ */

/* ---------- Thanh chuyển 2 bộ ---------- */
.deck-switch {
  display: flex; gap: 6px; background: var(--kem); border: 1px solid var(--vien);
  border-radius: 18px; padding: 5px; margin-top: 8px;
}
.ds-opt {
  flex: 1; border: none; background: transparent; color: var(--nau-dat-nhat);
  font-family: var(--sans); font-weight: 600; font-size: 13px; padding: 10px 4px;
  border-radius: 14px; cursor: pointer; transition: .2s; white-space: nowrap;
}
.ds-opt.on { background: var(--trang-nga); color: var(--xanh-reu); box-shadow: 0 6px 14px -8px var(--bong); }

/* ---------- Màn hình ---------- */
.ic-head { margin-top: 6px; text-align: center; }
.ic-head .pagetitle { font-size: 32px; }
.ic-sub { margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: var(--nau-dat-nhat); max-width: 320px; margin-left: auto; margin-right: auto; }

.ic-tabs { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; margin: 18px 0 20px; }
.ic-tab {
  border: 1px solid var(--vien); background: var(--trang-nga); color: var(--nau-dat-nhat);
  font-family: var(--sans); font-weight: 600; font-size: 12.5px; padding: 8px 13px;
  border-radius: 20px; cursor: pointer; transition: .18s; white-space: nowrap;
}
.ic-tab.on { background: var(--xanh-reu); color: var(--trang-nga); border-color: var(--xanh-reu); }

/* ---------- Lối vào ở màn Hôm nay ---------- */
.ic-entry {
  width: 100%; margin-top: 18px; display: flex; align-items: center; gap: 14px;
  background: linear-gradient(150deg, #fbf7ee, #f3ead8);
  border: 1px solid var(--vien); border-radius: 22px; padding: 16px 18px; cursor: pointer;
  box-shadow: 0 16px 30px -20px var(--bong); transition: transform .15s, box-shadow .2s;
}
.ic-entry:active { transform: scale(.98); }
.ic-entry-ic { width: 42px; height: 42px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.ic-entry-tx { flex: 1; text-align: left; }
.ic-entry-t { display: block; font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--xanh-reu); line-height: 1.25; }
.ic-entry-s { display: block; font-size: 12.5px; color: var(--nau-dat-nhat); margin-top: 3px; }

/* ---------- Trạng thái chưa rút (úp thẻ) ---------- */
.ic-draw { text-align: center; padding: 6px 0 10px; }
.ic-facedown {
  width: 100%; max-width: 300px; margin: 0 auto 22px; aspect-ratio: 340/470;
  border-radius: 26px; border: 1.5px solid rgba(196,155,90,.5);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(216,182,121,.18), transparent 55%),
    repeating-linear-gradient(45deg, #efe7d4, #efe7d4 9px, #ece2cd 9px, #ece2cd 18px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  box-shadow: 0 24px 48px -24px var(--bong); position: relative;
}
.ic-facedown .fd-seed { opacity: .85; }
.ic-facedown .fd-q { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--nau-go); padding: 0 26px; line-height: 1.5; }
.ic-draw-btn {
  width: 100%; max-width: 320px; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--vang-sang), var(--nau-go));
  color: var(--trang-nga); font-family: var(--sans); font-weight: 600; font-size: 16px;
  padding: 16px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 14px 26px -10px rgba(149,110,66,.6); transition: transform .15s;
}
.ic-draw-btn:active { transform: scale(.97); }
.ic-hint { font-size: 12.5px; color: var(--nau-dat-nhat); margin-top: 14px; text-align: center; }
.ic-date { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--vang); font-weight: 600; text-align: center; margin-bottom: 12px; }

/* ---------- THẺ LẬT 2 MẶT ---------- */
.flip-card {
  width: 100%; max-width: 360px; margin: 0 auto; position: relative;
  perspective: 1800px; cursor: pointer; min-height: 474px;
  transition: height .6s cubic-bezier(.2,.8,.3,1);
}
.flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2,.85,.3,1); }
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face {
  position: absolute; top: 0; left: 0; width: 100%;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  border-radius: 26px; overflow: hidden;
}
.card-back { transform: rotateY(180deg); }

/* MẶT TRƯỚC */
.card-front {
  background: var(--trang-nga);
  border: 1px solid rgba(196,155,90,.45);
  box-shadow: 0 26px 54px -26px var(--bong);
  padding: 26px 24px 22px;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 472px;
}
.cf-top { text-align: center; font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--vang); font-weight: 600; }
.cf-icon { display: flex; justify-content: center; margin-top: 26px; }
.cf-b { text-align: center; }
.cf-name { font-family: var(--serif); font-weight: 600; font-size: 42px; line-height: 1.05; color: var(--xanh-reu); }
.cf-en { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--vang); margin-top: 4px; }
.cf-c { text-align: center; }
.cf-whisper { font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.5; color: var(--nau-dat); padding: 0 4px 22px; }
.cf-foot { font-size: 10.5px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--vang); font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 7px; }
.cf-foot .hrt { color: var(--vang); font-size: 11px; }

/* MẶT SAU */
.card-back-inner {
  background: var(--trang-nga);
  border: 1px solid rgba(196,155,90,.45);
  box-shadow: 0 26px 54px -26px var(--bong);
  padding: 24px 22px 22px;
}
.cb-name { font-family: var(--serif); font-weight: 600; font-size: 27px; color: var(--xanh-reu); text-align: center; line-height: 1.1; }
.cb-group { text-align: center; font-size: 10.5px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--vang); font-weight: 600; margin-top: 5px; }
.cb-divider { height: 1px; background: var(--vien); margin: 16px 2px 18px; }
.cb-sec { margin-bottom: 16px; }
.cb-label { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--vang); font-weight: 500; margin-bottom: 6px; }
.cb-label b { color: var(--nau-go); font-weight: 700; }
.cb-body { font-family: var(--sans); font-size: 14px; line-height: 1.7; color: var(--nau-dat); }
.cb-body.ital { font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.55; color: var(--nau-dat); }
.cb-mantra {
  background: linear-gradient(160deg, #5b6647, #424b34);
  border-radius: 18px; padding: 16px 18px 18px; text-align: center; margin-top: 18px;
  box-shadow: 0 14px 26px -16px rgba(82,93,65,.7);
}
.cb-mantra-label { font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(250,249,245,.78); font-weight: 600; }
.cb-mantra-text { font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.45; color: var(--trang-nga); margin-top: 9px; }

/* ---------- Thanh hành động dưới thẻ ---------- */
.ic-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.ic-act {
  border: 1px solid var(--vien); background: var(--trang-nga); color: var(--nau-dat);
  font-family: var(--sans); font-weight: 600; font-size: 13px; padding: 10px 16px;
  border-radius: 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: .15s;
}
.ic-act:active { transform: scale(.96); }
.ic-act.fav-on { background: #f5e3df; border-color: #d8a99c; color: #9a3b2e; }

/* ---------- Danh sách yêu thích / lịch sử ---------- */
.ic-row {
  display: flex; align-items: center; gap: 13px; width: 100%;
  background: var(--trang-nga); border: 1px solid var(--vien); border-radius: 18px;
  padding: 13px 15px; margin-bottom: 10px; cursor: pointer; text-align: left; transition: transform .15s;
}
.ic-row:active { transform: scale(.985); }
.ic-row .dot { width: 30px; height: 30px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.ic-row .rx { flex: 1; }
.ic-row .rn { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--xanh-reu); }
.ic-row .rs { font-size: 11.5px; color: var(--nau-dat-nhat); margin-top: 1px; }
.ic-empty { text-align: center; color: var(--nau-dat-nhat); font-size: 13.5px; padding: 30px 16px; line-height: 1.6; }

/* ---------- Overlay xem 1 thẻ ---------- */
#icCardOverlay { position: fixed; inset: 0; background: rgba(30,28,22,.62); display: none; align-items: center; justify-content: center; z-index: 320; padding: 24px 20px calc(28px + env(safe-area-inset-bottom)); overflow-y: auto; }
#icCardOverlay.open { display: flex; }
.ic-ov-box { width: 100%; max-width: 380px; }
.ic-ov-close { display: block; margin: 14px auto 0; background: rgba(250,249,245,.92); border: none; color: var(--nau-dat); font-family: var(--sans); font-weight: 600; font-size: 14px; padding: 11px 22px; border-radius: 16px; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .flip-inner, .flip-card { transition: none !important; }
}