/* ===== ไพ่ทาโรต์ Pick a Card ===== */
:root{
  --df-primary:#b3122a; --df-primary-d:#7a0c1c;
  --df-gold:#d4af37; --df-gold-d:#a8841f;
  --df-nav:#3d0b14; --df-card:#fffdf6;
}
.df-tarot{background:var(--df-card);border-radius:18px;padding:26px;box-shadow:0 10px 30px rgba(0,0,0,.16);border:1px solid rgba(212,175,55,.35);text-align:center;position:relative;overflow:hidden}
.df-tarot::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--df-gold),var(--df-primary),var(--df-gold))}
.df-tarot h3{margin:0 0 6px;color:var(--df-primary-d);font-size:20px}
.df-ta-hint{margin:0 0 20px;color:#9a8463;font-size:14px}
.df-ta-deck{max-width:600px;margin:0 auto;perspective:1200px}
.df-ta-row{white-space:nowrap;text-align:left}
.df-ta-row + .df-ta-row{margin-top:20px}
.df-ta-card{display:inline-block;vertical-align:top;width:64px;aspect-ratio:11/18;border:0;background:none;padding:0;cursor:pointer;border-radius:9px;position:relative;transition:transform .2s,opacity .3s}
.df-ta-card:hover{transform:translateY(-16px) scale(1.06);z-index:400!important}
.df-ta-card.revealed{transform:translateY(-14px);z-index:350!important}
.df-ta-pos{display:none}
.df-ta-card:disabled{cursor:default}
.df-ta-card.dim{opacity:.35;filter:grayscale(.4);pointer-events:none}
.df-ta-card.dim:hover{transform:none}
.df-ta-inner{position:relative;width:100%;height:100%;display:block;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.df-ta-card.revealed .df-ta-inner{transform:rotateY(180deg)}
.df-ta-back,.df-ta-front{position:absolute;inset:0;border-radius:9px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.df-ta-back{display:flex;align-items:center;justify-content:center;font-size:18px;color:#ffe082;background:repeating-linear-gradient(45deg,var(--df-primary-d),var(--df-primary-d) 5px,var(--df-primary) 5px,var(--df-primary) 10px);border:1.5px solid var(--df-gold);box-shadow:inset 0 0 0 2px rgba(212,175,55,.3)}
.df-ta-front{transform:rotateY(180deg);background:#1a0810;border:1.5px solid var(--df-gold)}
.df-ta-front img{width:100%;height:100%;object-fit:cover;display:block}
.df-ta-btn{background:linear-gradient(135deg,var(--df-primary),var(--df-primary-d));color:#fff;border:0;padding:12px 26px;border-radius:12px;font-size:16px;font-weight:800;cursor:pointer;font-family:inherit;margin-top:20px;box-shadow:0 4px 14px rgba(122,12,28,.3)}
.df-ta-btn:hover{transform:translateY(-2px)}
.df-ta-result{margin-top:22px}
.df-ta-rcard{display:flex;gap:18px;text-align:left;border:1px solid #efe2c4;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#fffdf7,#fff7e6);animation:dfTaFade .5s ease}
@keyframes dfTaFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.df-ta-rimg{flex:0 0 150px;width:150px;background:#1a0810}
.df-ta-rimg img{width:100%;height:100%;object-fit:cover;display:block}
.df-ta-rbody{flex:1;min-width:0;padding:18px 20px}
.df-ta-rbody .nm{font-family:"Trirong",serif;font-size:20px;color:var(--df-primary-d);font-weight:700;margin:0 0 8px}
.df-ta-rbody .mn{color:#5b4636;line-height:1.75;font-size:15px;margin:0 0 12px}
.df-ta-nums{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.df-ta-nums .lbl{font-size:13px;color:#9a8463;margin-right:2px}
.df-chip{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:42px;padding:0 12px;background:linear-gradient(135deg,var(--df-gold),var(--df-gold-d));color:#3d0b14;border-radius:10px;font-weight:800;font-size:18px;letter-spacing:1px;box-shadow:0 3px 8px rgba(168,132,31,.35)}
.df-chip.three{background:linear-gradient(135deg,var(--df-primary),var(--df-primary-d));color:#fff}
.df-ta-credit{font-size:11.5px;color:#9a8463;margin:10px 2px 0}
.df-empty{padding:16px;text-align:center;color:#9a8463;background:#fbf3df;border-radius:12px}
@media(max-width:600px){
  .df-tarot{padding:18px}
  .df-ta-card{width:44px}
  .df-ta-rcard{flex-direction:column}
  .df-ta-rimg{width:100%;height:240px;flex-basis:auto}
}

/* แถบเลือกโหมด */
.df-ta-modes{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 18px}
.df-ta-mode{border:1.5px solid rgba(212,175,55,.6);background:#fff;color:var(--df-primary-d);padding:8px 16px;border-radius:30px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:.15s}
.df-ta-mode:hover{background:#fff3d6}
.df-ta-mode.active{background:linear-gradient(135deg,var(--df-primary),var(--df-primary-d));color:#fff;border-color:var(--df-primary-d)}
.df-ta-tag{display:inline-block;background:linear-gradient(135deg,var(--df-gold),var(--df-gold-d));color:#3d0b14;font-weight:800;font-size:12.5px;padding:3px 12px;border-radius:20px;margin-bottom:8px}
.df-ta-note{font-size:12px;color:#9a8463;margin:16px 0 0;text-align:center}

/* ===== มาตรฐานสากล: สเปรด + ตั้ง/กลับหัว ===== */
.df-ta-spreads{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 14px}
.df-ta-spread{border:1.5px solid rgba(212,175,55,.6);background:#fff;color:var(--df-primary-d);padding:8px 16px;border-radius:30px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:.15s}
.df-ta-spread:hover{background:#fff3d6}
.df-ta-spread.active{background:linear-gradient(135deg,var(--df-primary),var(--df-primary-d));color:#fff;border-color:var(--df-primary-d)}
.df-ta-progress{display:inline-block;margin-left:6px;color:#9a8463;font-size:14px;font-weight:600}
.df-ta-pos{display:block;margin-top:3px;font-size:9px;color:#9a8463;line-height:1.15;min-height:11px}
/* ไพ่กลับหัว */
.df-ta-front img.rev,.df-ta-rimg img.rev{transform:rotate(180deg)}
.df-ta-card.is-rev .df-ta-front{box-shadow:inset 0 0 0 3px rgba(179,18,42,.55)}
/* รายการคำอ่าน (หลายใบ) */
.df-ta-reading .df-ta-rcard{margin-bottom:14px}
.df-ta-ori{display:inline-block;margin-left:6px;font-size:11.5px;font-weight:700;color:#2e7d32}
.df-ta-ori.rev{color:#b3122a}
.df-ta-sum{margin-top:6px;padding:14px 16px;border:1px dashed rgba(212,175,55,.6);border-radius:12px;background:#fffdf3;text-align:left}
.df-ta-sum .lbl{display:block;color:#9a8463;font-size:13px;margin-bottom:8px}

/* ===== สรุปคำทำนายแบบหมวดหมู่ ===== */
.df-ta-summary{margin-top:6px}
.df-ta-summary h4{margin:0 0 10px;color:var(--df-primary-d);font-size:16px;text-align:left}
.df-ta-cats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;text-align:left}
.df-ta-cat{border:1px solid #efe2c4;border-left-width:4px;border-radius:10px;padding:10px 12px;background:#fffdf7}
.df-ta-cat-h{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.df-ta-cat-h .ic{font-size:16px}
.df-ta-cat-h .lb{font-weight:800;color:#5b4636;font-size:14px}
.df-ta-cat-h .vd{margin-left:auto;font-size:12px;font-weight:800;padding:2px 9px;border-radius:20px}
.df-ta-cat .tx{margin:0;font-size:13px;color:#6b5743;line-height:1.6}
.df-ta-cat.tone-good{border-left-color:#2e9e57}
.df-ta-cat.tone-good .vd{background:#e3f5e9;color:#1b7a3d}
.df-ta-cat.tone-mid{border-left-color:var(--df-gold-d)}
.df-ta-cat.tone-mid .vd{background:#fbf0d2;color:#8a6a14}
.df-ta-cat.tone-warn{border-left-color:var(--df-primary)}
.df-ta-cat.tone-warn .vd{background:#fbe0e4;color:#9e1024}
@media(max-width:600px){.df-ta-cats{grid-template-columns:1fr}}