/* ============================================
   استایل اختصاصی صفحه‌ی فال تاروت
============================================ */

.tarot-hero{
  min-height:55vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:150px 6vw 50px;
  position:relative;
  z-index:1;
}
.tarot-hero .eyebrow{color:var(--indigo); letter-spacing:2px; font-size:0.8rem; margin-bottom:16px;}
.tarot-hero h1{font-size:clamp(2rem,5vw,3.4rem); color:var(--gold-soft); margin-bottom:18px;}
.tarot-hero p{max-width:540px; color:var(--text-muted); line-height:2;}

.tarot-stage{max-width:1100px; margin:0 auto; padding:0 6vw 120px; position:relative; z-index:1;}

.tarot-deck-grid{
  display:grid;
  grid-template-columns:repeat(11, 1fr);
  gap:10px;
}
@media(max-width:980px){ .tarot-deck-grid{grid-template-columns:repeat(6, 1fr);} }
@media(max-width:600px){ .tarot-deck-grid{grid-template-columns:repeat(4, 1fr);} }

.tarot-card-wrap{
  aspect-ratio:2/3.3;
  position:relative;
}

.tarot-card{
  position:absolute;
  inset:0;
  cursor:pointer;
  border-radius:9px;
  opacity:0;
  animation:dealIn .5s ease forwards;
  transition:transform .3s ease;
}
.tarot-card .face{
  position:absolute; inset:0;
  border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .35s ease, transform .35s ease;
}
.tarot-card .face-back{
  background:
    url('../img/tarot-back.jpg') center/cover no-repeat,
    radial-gradient(circle at 50% 50%, rgba(107,127,212,0.25), transparent 60%),
    repeating-linear-gradient(45deg, rgba(107,127,212,0.14) 0 6px, transparent 6px 12px),
    linear-gradient(160deg, var(--surface-2), var(--surface));
  border:1px solid var(--line);
  opacity:1;
  transform:scale(1);
}
.tarot-card .face-back::after{content:'☾'; color:var(--indigo); font-size:1.2rem; opacity:0.75;}
.tarot-card .face-front{
  background:linear-gradient(160deg, #241a3d, #170f28);
  border:1px solid var(--indigo);
  color:var(--gold-soft);
  font-size:0.7rem;
  text-align:center;
  padding:0;
  overflow:hidden;
  flex-direction:column;
  align-items:flex-end;
  justify-content:flex-end;
  opacity:0;
  transform:scale(.92);
  pointer-events:none;
}
.tarot-card .face-front img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}
.tarot-card .face-front .front-label{
  position:relative;
  z-index:1;
  width:100%;
  padding:5px 3px 4px;
  background:linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}
.tarot-card .face-front .sym{font-size:1.1rem;}
.tarot-card .face-front.no-image{
  align-items:center;
  justify-content:center;
  padding:4px;
  gap:4px;
}
.tarot-card .face-front.no-image .sym{font-size:1.3rem;}
.tarot-card .face-front.no-image .front-label{background:none; padding:0;}
.tarot-card.picked{
  transform:translateY(-10px);
  z-index:5;
}
.tarot-card.picked .face-back{
  opacity:0;
  transform:scale(.92);
}
.tarot-card.picked .face-front{
  opacity:1;
  transform:scale(1);
  box-shadow:0 0 0 2px var(--indigo), 0 10px 30px rgba(107,127,212,0.45);
}
.tarot-card.picked .face-front::after{
  content:'✓';
  position:absolute;
  top:4px; left:4px;
  width:16px;height:16px;
  border-radius:50%;
  background:var(--indigo);
  color:#fff;
  font-size:0.65rem;
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
  z-index:2;
}
.tarot-card:not(.picked):hover{transform:translateY(-8px);}

.tarot-result-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:24px;
  margin-bottom:40px;
}
.tarot-result-card{
  background:linear-gradient(165deg, var(--surface-2), var(--surface));
  border:1px solid var(--line);
  border-radius:18px;
  padding:28px 22px;
  opacity:0;
  transform:translateY(30px) rotate(-4deg);
  animation:settleResult .8s cubic-bezier(.34,1.56,.64,1) forwards;
  overflow:hidden;
}
.tarot-result-card .result-photo{
  display:block;
  width:100%;
  aspect-ratio:2/3;
  object-fit:cover;
  border-radius:12px;
  margin-bottom:18px;
  border:1px solid var(--line);
}
.tarot-result-card .result-photo.reversed-img{
  transform:rotate(180deg);
}
.tarot-result-card:nth-child(2){animation-delay:.15s;}
.tarot-result-card:nth-child(3){animation-delay:.3s;}
.tarot-result-card .top-row{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.tarot-result-card .sym{font-size:1.8rem;}
.tarot-result-card .badge{
  font-size:0.72rem;
  padding:3px 10px;
  border-radius:999px;
  border:1px solid var(--indigo);
  color:var(--indigo);
}
.tarot-result-card .badge.reversed{border-color:var(--rose); color:var(--rose);}
.tarot-result-card h3{font-family:'Aref Ruqaa',serif; font-size:1.3rem; color:var(--gold-soft); margin-bottom:4px;}
.tarot-result-card .card-title{font-size:0.85rem; color:var(--text-muted); margin-bottom:14px;}
.tarot-result-card p{color:var(--text); line-height:2; font-size:0.95rem;}