/* ============================================================
   grid.css — Ank Kundali 3x3 Grid (Softly Theme)
   ============================================================ */

.kundali-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-xl);
}

.kundali-title {
  text-align: center;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone-400);
  margin-bottom: var(--sp-sm);
}

/* ── 3×3 Grid ─────────────────────────────────────────────── */
.kundali-grid {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows:    repeat(3, 100px);
  gap: 6px;
  position: relative;
}

/* ── Cell ─────────────────────────────────────────────────── */
.kundali-cell {
  position: relative;
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: default;
  transition: transform var(--tr-med), box-shadow var(--tr-med);
  overflow: hidden;
  background: var(--stone-50);
  border: 1.5px solid var(--stone-200);
}
.kundali-cell:hover { transform: scale(1.06); z-index: 2; box-shadow: var(--shadow-md); }

/* Empty state */
.kundali-cell.empty {
  background: var(--stone-50);
  border: 1.5px dashed var(--stone-200);
}
.kundali-cell.empty .cell-number { color: var(--stone-300); font-size: 1.3rem; }

.kundali-cell.present { animation: cell-appear 0.5s var(--ease-out) both; }

/* Planet-tinted cells */
.kundali-cell.num-1 { background: rgba(212,136,42,0.07);  border-color: rgba(212,136,42,0.25); }
.kundali-cell.num-2 { background: rgba(122,157,184,0.07); border-color: rgba(122,157,184,0.25); }
.kundali-cell.num-3 { background: rgba(196,160,32,0.07);  border-color: rgba(196,160,32,0.25); }
.kundali-cell.num-4 { background: rgba(123,111,174,0.07); border-color: rgba(123,111,174,0.25); }
.kundali-cell.num-5 { background: rgba(74,142,106,0.07);  border-color: rgba(74,142,106,0.25); }
.kundali-cell.num-6 { background: rgba(212,114,138,0.07); border-color: rgba(212,114,138,0.25); }
.kundali-cell.num-7 { background: rgba(160,120,72,0.07);  border-color: rgba(160,120,72,0.25); }
.kundali-cell.num-8 { background: rgba(74,110,184,0.07);  border-color: rgba(74,110,184,0.25); }
.kundali-cell.num-9 { background: rgba(192,64,80,0.07);   border-color: rgba(192,64,80,0.25); }

/* ── Cell content ─────────────────────────────────────────── */
.cell-position {
  font-size: 0.58rem;
  font-family: var(--font-primary);
  color: var(--stone-400);
  position: absolute;
  top: 6px; left: 8px;
  z-index: 1;
  font-weight: 500;
}

.cell-number {
  font-family: var(--font-number);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  position: relative;
  z-index: 1;
  letter-spacing: -0.03em;
}
.num-1 .cell-number { color: var(--planet-1); }
.num-2 .cell-number { color: var(--planet-2); }
.num-3 .cell-number { color: var(--planet-3); }
.num-4 .cell-number { color: var(--planet-4); }
.num-5 .cell-number { color: var(--planet-5); }
.num-6 .cell-number { color: var(--planet-6); }
.num-7 .cell-number { color: var(--planet-7); }
.num-8 .cell-number { color: var(--planet-8); }
.num-9 .cell-number { color: var(--planet-9); }
.empty .cell-number  { color: var(--stone-300); }

/* Count dots */
.cell-count {
  display: flex; gap: 2px;
  position: absolute;
  bottom: 6px; right: 6px;
  z-index: 1;
}
.cell-count-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
}

.cell-planet {
  font-size: 0.55rem;
  color: var(--stone-400);
  text-align: center;
  z-index: 1;
  letter-spacing: 0.04em;
  position: absolute;
  bottom: 6px;
  left: 0; right: 0;
}

/* ── Core number display ──────────────────────────────────── */
.core-numbers {
  display: flex;
  gap: var(--sp-md);
  justify-content: center;
  flex-wrap: wrap;
}
.core-number-card {
  background: var(--white);
  border: 1px solid var(--stone-200);
  border-radius: var(--r-lg);
  padding: var(--sp-md) var(--sp-lg);
  text-align: center;
  min-width: 110px;
  transition: all var(--tr-med);
  box-shadow: var(--shadow-soft);
}
.core-number-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.core-number-card .label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--stone-400);
  font-weight: 600;
  margin-bottom: 4px;
}
.core-number-card .value {
  font-family: var(--font-number);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
}
.core-number-card .planet { font-size: 0.68rem; color: var(--muted); margin-top: 4px; }

.core-number-card.basic   .value { color: var(--coral-dark); }
.core-number-card.destiny .value { color: var(--planet-8); }
.core-number-card.support .value { color: var(--stone-500); font-size: 1.8rem; }

/* ── Missing numbers ──────────────────────────────────────── */
.missing-strip { display: flex; gap: var(--sp-sm); justify-content: center; flex-wrap: wrap; }
.missing-pill {
  padding: 5px 12px;
  border-radius: var(--r-full);
  font-family: var(--font-number);
  font-size: 0.88rem;
  font-weight: 600;
  background: var(--stone-100);
  border: 1.5px dashed var(--stone-300);
  color: var(--stone-400);
  display: flex; align-items: center; gap: 4px;
}
.missing-pill::before { content: '✕'; font-size: 0.6rem; color: var(--color-negative); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .kundali-grid {
    grid-template-columns: repeat(3, 82px);
    grid-template-rows:    repeat(3, 82px);
  }
  .cell-number { font-size: 1.8rem; }
}