/* ===================================
   Tarot Draw Block Styles
   =================================== */

.tarot-wrap { max-width:900px; margin:0 auto; padding:48px 40px; }
.tarot-step { display:none; }
.tarot-step.active { display:block; animation:tFade 0.5s ease; }
@keyframes tFade { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.tarot-label { font-family:'Manrope',sans-serif; font-size:11px; letter-spacing:0.28em; text-transform:uppercase; color:var(--gold); margin-bottom:18px; text-align:center; }
.spread-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:28px; }
@media (max-width:680px){ .spread-grid{ grid-template-columns:1fr; } }
.spread-opt { background:var(--bg-input); border:1px solid var(--line-dim); border-radius:6px; padding:22px 20px; cursor:pointer; text-align:center; transition:all 0.3s ease; }
.spread-opt:hover { border-color:var(--line); background:var(--bg-card-hover); }
.spread-opt.sel { border-color:var(--gold); background:var(--gold-soft); }
.spread-opt h4 { font-family:'Cinzel',serif; font-size:17px; font-weight:500; color:var(--text-primary); margin-bottom:6px; letter-spacing:0.02em; }
.spread-opt .cnt { font-family:'Manrope',sans-serif; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; }
.spread-opt p { font-family:'Cormorant Garamond',serif; font-size:15px; color:var(--text-secondary); line-height:1.5; }
.tarot-wrap input.tarot-q { width:100%; padding:16px 18px; background:var(--bg-input, rgba(7,2,26,0.6)); border:1px solid var(--line-dim, rgba(212,175,55,0.12)); border-radius:6px; color:var(--text-primary, #f5e6d3); font-family:'Manrope',sans-serif; font-size:15px; outline:none; transition:border-color 0.3s,box-shadow 0.3s; margin-bottom:8px; box-sizing: border-box; }
.tarot-wrap input.tarot-q::placeholder { color:var(--text-muted, #7a6f80); font-family:'Manrope',sans-serif; font-style:normal; opacity:1; }
.tarot-wrap input.tarot-q:focus { border-color:var(--gold, #d4af37); box-shadow:0 0 0 3px rgba(212,175,55,0.12); }
.tarot-hint { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:16px; color:var(--text-secondary); text-align:center; margin:18px 0 26px; line-height:1.55; }
.tarot-deck { display:flex; justify-content:center; flex-wrap:wrap; gap:6px; margin:30px 0; perspective:900px; }
.tcard { width:62px; height:104px; border-radius:7px; cursor:pointer; position:relative; transform-style:preserve-3d; transition:transform 0.55s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s; }
.tcard:hover:not(.picked) { transform:translateY(-12px); }
.tcard.picked { cursor:default; }
.tcard.flipped { transform:rotateY(180deg); }
.tcard .face { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:7px; display:flex; align-items:center; justify-content:center; }
.tcard .back { background:linear-gradient(150deg,#1a0e3e 0%,#2a1660 50%,#1a0e3e 100%); border:1px solid var(--line); color:var(--gold); font-family:'Cinzel',serif; font-size:20px; box-shadow:0 4px 14px rgba(0,0,0,0.4); }
.tcard .back::after { content:'✦'; opacity:0.7; }
.tcard .front { background:linear-gradient(160deg,#241248 0%,#3a1f74 100%); border:1px solid var(--gold); transform:rotateY(180deg); flex-direction:column; gap:6px; padding:8px 6px; box-shadow:0 0 22px rgba(212,175,55,0.35); }
.tcard .front .ic { font-family:'Cinzel',serif; font-size:22px; color:var(--gold-bright); }
.tcard .front .nm { font-family:'Manrope',sans-serif; font-size:8.5px; letter-spacing:0.04em; color:var(--text-primary); text-align:center; line-height:1.25; text-transform:uppercase; }
.tarot-count { text-align:center; font-family:'Manrope',sans-serif; font-size:13px; letter-spacing:0.06em; color:var(--text-secondary); margin-bottom:20px; }
.tarot-count b { color:var(--gold-bright); }
.tarot-result { display:flex; flex-direction:column; gap:18px; margin:8px 0 26px; }
.tarot-rcard { display:flex; gap:20px; align-items:flex-start; background:var(--bg-input); border:1px solid var(--line-dim); border-radius:8px; padding:20px 22px; }
.tarot-rcard .pos { font-family:'Manrope',sans-serif; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); margin-bottom:6px; }
.tarot-rcard .cname { font-family:'Cinzel',serif; font-size:19px; font-weight:500; color:var(--text-primary); margin-bottom:8px; letter-spacing:0.02em; }
.tarot-rcard .cmean { font-family:'Cormorant Garamond',serif; font-size:17px; color:var(--text-secondary); line-height:1.6; }
.tarot-rcard .glyph { font-family:'Cinzel',serif; font-size:30px; color:var(--gold-bright); flex-shrink:0; width:52px; height:52px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle,var(--purple-soft) 0%,var(--bg-deep) 75%); }
.tarot-actions { text-align:center; margin-top:8px; }
.tarot-actions .btn { margin:0 6px; }
.tarot-reset { background:none; border:none; color:var(--text-muted); font-family:'Manrope',sans-serif; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; margin-top:18px; transition:color 0.25s; }
.tarot-reset:hover { color:var(--gold-bright); }