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

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

/* ---------- وضعیت‌های مختلف مرحله فال ---------- */
.varagh-stage{
  max-width:1100px;
  margin:0 auto;
  padding:0 6vw 120px;
  position:relative;
  z-index:1;
}
.stage-panel{display:none;}
.stage-panel.active{display:block;}

/* دکمه شروع */
.start-wrap{
  text-align:center;
  padding:40px 0;
}

/* ---------- دسته کارت‌ها ---------- */
.deck-instructions{
  text-align:center;
  color:var(--text-muted);
  margin-bottom:36px;
  font-size:0.95rem;
}
.deck-instructions b{color:var(--gold-soft);}
.selection-counter{
  display:inline-flex;
  gap:8px;
  margin-inline-start:8px;
}
.selection-counter .dot{
  width:9px;height:9px;
  border-radius:50%;
  border:1px solid var(--gold);
  transition:background .3s ease;
}
.selection-counter .dot.filled{background:var(--gold);}

.deck-grid{
  display:grid;
  grid-template-columns:repeat(13, 1fr);
  gap:8px;
  perspective:1200px;
}
@media(max-width:980px){
  .deck-grid{grid-template-columns:repeat(8, 1fr);}
}
@media(max-width:600px){
  .deck-grid{grid-template-columns:repeat(5, 1fr);}
}

.deck-card{
  aspect-ratio:2/3;
  position:relative;
  cursor:pointer;
  border-radius:8px;
  transform-style:preserve-3d;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
  opacity:0;
  animation:dealIn .5s ease forwards;
}
@keyframes dealIn{
  from{opacity:0; transform:translateY(24px) scale(.85);}
  to{opacity:1; transform:translateY(0) scale(1);}
}
.deck-card .face{
  position:absolute;
  inset:0;
  border-radius:8px;
  backface-visibility:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.deck-card .face-back{
  background:
    repeating-linear-gradient(45deg, rgba(212,168,87,0.12) 0 6px, transparent 6px 12px),
    linear-gradient(160deg, var(--surface-2), var(--surface));
  border:1px solid var(--line);
}
.deck-card .face-back::after{
  content:'✦';
  color:var(--gold);
  font-size:1.1rem;
  opacity:0.6;
}
.deck-card .face-front{
  background:linear-gradient(160deg, #241a3d, #170f28);
  border:1px solid var(--gold);
  transform:rotateY(180deg);
  color:var(--gold-soft);
  font-size:0.75rem;
  text-align:center;
  padding:4px;
}
.deck-card.picked{transform:translateY(-14px) rotateY(180deg);}
.deck-card.picked .face-back{opacity:0;}
.deck-card:not(.picked):hover{transform:translateY(-8px);}
.deck-card.disabled{
  pointer-events:none;
  opacity:0.35;
}

.deck-actions{
  text-align:center;
  margin-top:44px;
}

/* ---------- بارگذاری / شافل ---------- */
.shuffling{
  text-align:center;
  padding:80px 0;
  color:var(--gold-soft);
}
.shuffling .spinner-card{
  width:70px;height:100px;
  margin:0 auto 24px;
  border-radius:8px;
  border:1px solid var(--gold);
  background:linear-gradient(160deg, var(--surface-2), var(--surface));
  animation:spinCard 1.1s linear infinite;
}
@keyframes spinCard{
  0%{transform:rotateY(0deg);}
  100%{transform:rotateY(360deg);}
}

/* ---------- نتیجه فال ---------- */
.result-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:24px;
  margin-bottom:40px;
}
.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;
}
.result-card:nth-child(2){animation-delay:.15s;}
.result-card:nth-child(3){animation-delay:.3s;}
.result-card:nth-child(4){animation-delay:.45s;}
.result-card:nth-child(5){animation-delay:.6s;}
@keyframes settleResult{
  to{opacity:1; transform:translateY(0) rotate(0deg);}
}
.result-card .suit-badge{
  display:inline-block;
  font-size:1.6rem;
  margin-bottom:14px;
  color:var(--gold);
}
.result-card h3{
  font-family:'Aref Ruqaa',serif;
  font-size:1.3rem;
  color:var(--gold-soft);
  margin-bottom:6px;
}
.result-card .card-title{
  font-size:0.85rem;
  color:var(--text-muted);
  margin-bottom:14px;
}
.result-card p{
  color:var(--text);
  line-height:2;
  font-size:0.95rem;
}

.result-actions{
  text-align:center;
}

.error-box{
  text-align:center;
  color:var(--rose);
  background:rgba(176,74,107,0.1);
  border:1px solid rgba(176,74,107,0.3);
  border-radius:12px;
  padding:20px;
  margin-bottom:24px;
  display:none;
}