/* =====================================================================
   ไพ่ทำนายประจำวัน (card.html) + ไพ่ SVG ที่ใช้ร่วมกับหน้ารวม
   ===================================================================== */

/* ---------- ไพ่ (SVG) ---------- */
.cf { display: block; width: 100%; height: auto; aspect-ratio: 3 / 5; border-radius: 6%/3.6%; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .55)); }
.cf.is-rev { transform: rotate(180deg); }

/* ---------- แท็บโหมด ---------- */
.cd-tabs { margin: 0 auto 18px; }
.cd-tabs button { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; }
.cd-tabs button svg { width: 16px; height: 16px; }

/* ---------- เวที (stage) ---------- */
.cd-stage {
  position: relative; overflow: hidden; text-align: center; padding: 22px 14px 26px; min-height: 360px;
  background: radial-gradient(520px 260px at 50% 100%, rgba(227, 194, 122, .14), transparent 70%), radial-gradient(600px 300px at 50% 0%, rgba(144, 103, 198, .3), transparent 70%), linear-gradient(180deg, #23103f, #150a28);
  border-radius: var(--radius-lg); border: 1px solid var(--line-2); box-shadow: var(--shadow-gold);
}
.cd-stage::before { /* ผ้าปูโต๊ะลายวงกลม */
  content: ''; position: absolute; left: 50%; bottom: -260px; width: 620px; height: 620px; transform: translateX(-50%); border-radius: 50%;
  border: 1px solid rgba(227, 194, 122, .14); box-shadow: 0 0 0 26px rgba(227, 194, 122, .03), 0 0 0 27px rgba(227, 194, 122, .1); pointer-events: none;
}
.cd-stage > * { position: relative; }
.cd-intro h2 { margin-bottom: .2em; }
.cd-intro p { color: var(--text-2); max-width: 520px; margin: 0 auto 14px; font-size: .95rem; }
.cd-topics { justify-content: center; margin-bottom: 10px; }
.cd-topics .chip { min-height: 40px; }

/* สำรับไพ่ + สับไพ่ */
.cd-deck { position: relative; width: 112px; height: 187px; margin: 18px auto 22px; }
@media (min-width: 720px) { .cd-deck { width: 132px; height: 220px; } }
.cd-deck .cf { position: absolute; inset: 0; transform: translate(calc(var(--i) * -1.4px), calc(var(--i) * -1.4px)); }
.cd-deck.idle .cf:last-child { animation: cdBreath 3s ease-in-out infinite; }
@keyframes cdBreath { 0%, 100% { filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .55)) drop-shadow(0 0 0 rgba(227, 194, 122, 0)); } 50% { filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .55)) drop-shadow(0 0 18px rgba(227, 194, 122, .5)); } }
.cd-deck.shuffling .cf { animation: cdRiffle .7s cubic-bezier(.45, .05, .35, 1) calc(var(--i) * 50ms) 2 both; }
@keyframes cdRiffle {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  35% { transform: translate(calc(var(--s) * 70%), -10%) rotate(calc(var(--s) * 14deg)); }
  65% { transform: translate(calc(var(--s) * -12%), 3%) rotate(calc(var(--s) * -4deg)); }
}
.cd-deck.shuffling { filter: drop-shadow(0 0 22px rgba(227, 194, 122, .35)); }

/* พัดไพ่ 3 มิติ */
.cd-fan-wrap { perspective: 1100px; padding-top: 14px; }
.cd-fan { --fw: 60px; position: relative; height: calc(var(--fw) * 1.6667 + var(--drop, 60px) + 30px); transform: rotateX(16deg); transform-style: preserve-3d; margin: 0 auto; max-width: 980px; }
@media (min-width: 720px) { .cd-fan { --fw: 88px; } }
.cd-fc {
  position: absolute; left: 50%; top: 22px; width: var(--fw); margin-left: calc(var(--fw) / -2); padding: 0; border: 0; background: none; cursor: pointer;
  transform-origin: 50% calc(100% + var(--R, 200px)); transform: rotate(0deg) translateY(30px); opacity: 0;
  transition: transform .55s var(--ease), opacity .45s ease, filter .3s; border-radius: 8px; -webkit-tap-highlight-color: transparent;
}
.cd-fan.spread .cd-fc { transform: rotate(calc(var(--a) * 1deg)) translateY(0); opacity: 1; transition-delay: calc(var(--i) * 26ms); }
.cd-fan.ready .cd-fc { transition-delay: 0s; }
@media (hover: hover) {
  .cd-fan.ready:not(.complete) .cd-fc:not(.picked):hover { transform: rotate(calc(var(--a) * 1deg)) translateY(-16px); }
  .cd-fan.ready:not(.complete) .cd-fc:not(.picked):hover .cf { filter: drop-shadow(0 0 14px rgba(227, 194, 122, .55)); }
}
.cd-fc:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }
.cd-fc.picked { transform: rotate(calc(var(--a) * 1deg)) translateY(-36px) !important; z-index: 50; }
.cd-fc.picked .cf { filter: drop-shadow(0 0 2px #fff1c9) drop-shadow(0 0 18px rgba(227, 194, 122, .8)); animation: cdGlow 1.4s ease-in-out infinite alternate; }
@keyframes cdGlow { to { filter: drop-shadow(0 0 28px rgba(255, 228, 160, .95)); } }
.cd-fc .no { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); min-width: 24px; height: 24px; border-radius: 99px; display: none; place-items: center; font-size: .78rem; font-weight: 600; color: var(--ink); background: var(--gold-grad); box-shadow: 0 0 12px rgba(227, 194, 122, .7); z-index: 2; }
.cd-fc.picked .no { display: grid; }
.cd-fan.complete .cd-fc:not(.picked) { opacity: .25; filter: grayscale(.6); cursor: default; }
.cd-fan.leaving .cd-fc { opacity: 0; transform: rotate(0deg) translateY(60px) scale(.8); transition: .5s var(--ease); }
.cd-hint { margin-top: 6px; font-family: var(--font-head); color: var(--gold-2); font-size: 1rem; min-height: 1.6em; }
.cd-hint small { display: block; font-family: var(--font-body); color: var(--text-3); font-size: .82rem; }

/* พลิกไพ่ */
.cd-slots { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 8px 0 4px; }
.cd-slot { display: flex; flex-direction: column; align-items: center; gap: 10px; width: var(--cw, 190px); }
.cd-slots.n3 .cd-slot { --cw: 30%; max-width: 170px; }
@media (min-width: 720px) { .cd-slot { --cw: 230px; } .cd-slots.n3 .cd-slot { --cw: 180px; } }
.cd-slot-lbl { font-family: var(--font-head); font-size: .92rem; color: var(--gold-2); line-height: 1.2; }
.cd-flip { width: 100%; aspect-ratio: 3 / 5; perspective: 1200px; position: relative; }
.cd-flip::before { content: ''; position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(circle, rgba(227, 194, 122, .45), transparent 62%); opacity: 0; transition: opacity 1s .4s; pointer-events: none; }
.cd-flip.flipped::before { opacity: 1; }
.cd-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.3, .75, .25, 1); }
.cd-flip.flipped .cd-inner { transform: rotateY(180deg); }
.cd-side { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.cd-side.face { transform: rotateY(180deg); }
.cd-side.face .cf.is-rev { transform: rotate(180deg); }
.cd-rev-tag { font-size: .78rem; }

/* ---------- ผลลัพธ์ ---------- */
.cd-result { margin-top: 22px; }
.cd-res-head { text-align: center; margin-bottom: 16px; }
.cd-res-head h2 { margin: 6px 0 2px; }
.cd-res-head .en { color: var(--text-3); letter-spacing: .08em; font-size: .9rem; }
.cd-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.cd-meaning { font-size: 1.02rem; line-height: 1.9; }
.cd-advice { margin-top: 14px; }
.cd-advice b { color: var(--gold-2); font-family: var(--font-head); font-weight: 600; }
.cd-pos-cards { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .cd-pos-cards { grid-template-columns: repeat(3, 1fr); } }
.cd-pos { display: grid; grid-template-columns: 74px 1fr; gap: 14px; align-items: start; }
.cd-pos .cf { width: 74px; }
.cd-pos h3 { margin: 0; font-size: 1.08rem; color: var(--gold-2); }
.cd-pos .lbl { font-size: .78rem; letter-spacing: .1em; color: var(--text-3); }
.cd-pos p { margin: 6px 0 0; color: var(--text-2); font-size: .93rem; line-height: 1.75; }
.cd-tend { text-align: center; padding: 18px; border-radius: var(--radius); border: 1px solid var(--line-2); background: radial-gradient(circle at 50% 0, rgba(227, 194, 122, .16), transparent 70%); margin-bottom: 14px; }
.cd-tend .lbl { display: block; font-size: .8rem; letter-spacing: .14em; color: var(--text-3); }
.cd-tend b { display: block; font-family: var(--font-head); font-size: 2.2rem; line-height: 1.3; }
.cd-tend p { margin: 4px 0 0; color: var(--text-2); font-size: .93rem; }
.cd-done-note { margin-bottom: 14px; }

/* ---------- ประวัติ 7 วัน ---------- */
.cd-hist { display: grid; grid-auto-flow: column; grid-auto-columns: 92px; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: thin; }
@media (min-width: 900px) { .cd-hist { grid-auto-flow: row; grid-template-columns: repeat(7, 1fr); overflow: visible; } }
.cd-hd { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-soft); color: var(--text-2); font-size: .78rem; text-align: center; line-height: 1.3; min-height: 44px; }
button.cd-hd { cursor: pointer; transition: .2s; }
button.cd-hd:hover { border-color: var(--line-2); transform: translateY(-2px); }
.cd-hd .cf { width: 64px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
.cd-hd .ph { width: 64px; aspect-ratio: 3/5; border-radius: 6px; border: 1.5px dashed var(--line); display: grid; place-items: center; color: var(--text-3); }
.cd-hd .ph svg { width: 18px; height: 18px; }
.cd-hd b { font-weight: 500; color: var(--text); font-size: .8rem; }
.cd-hd.today { border-color: var(--gold); background: rgba(227, 194, 122, .08); }

/* modal ไพ่ */
.cd-modal { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: start; }
.cd-modal .cf { width: 96px; }

@media (prefers-reduced-motion: reduce) {
  .cd-deck.idle .cf:last-child, .cd-deck.shuffling .cf, .cd-fc.picked .cf { animation: none; }
  .cd-inner, .cd-fc { transition: none; }
}