/* ── Animations ── */
.result-reveal {
  animation: fadeInUp 0.35s ease both;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Grid cells — base ── */
.grid-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-height: 72px;
  font-size: 1.4rem;
}

/* Driver / Conductor / Kua label bar */
.cell-label-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 1px;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
}
.cell-label {
  flex: 1;
  font-size: 0.48rem;
  font-weight: 800;
  text-align: center;
  padding: 2px 1px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.label-d { background: #f97316; color: #fff; }
.label-c { background: #ec4899; color: #fff; }
.label-k { background: #22c55e; color: #fff; }

/* Cell background overrides for Driver / Conductor / Kua (missing from DOB) */
.grid-cell.cell-driver-only {
  background: #f97316; color: #fff; border-color: #ea580c;
}
.grid-cell.cell-conductor-only {
  background: #ec4899; color: #fff; border-color: #db2777;
}
.grid-cell.cell-kua-only {
  background: #22c55e; color: #fff; border-color: #16a34a;
}
.grid-cell.cell-driver-conductor {
  background: linear-gradient(135deg, #f97316 50%, #ec4899 50%);
  color: #fff; border-color: #ea580c;
}
.grid-cell.cell-driver-kua {
  background: linear-gradient(135deg, #f97316 50%, #22c55e 50%);
  color: #fff; border-color: #ea580c;
}
.grid-cell.cell-conductor-kua {
  background: linear-gradient(135deg, #ec4899 50%, #22c55e 50%);
  color: #fff; border-color: #db2777;
}
.grid-cell.cell-all-three {
  background: linear-gradient(135deg, #f97316 33%, #ec4899 66%, #22c55e 100%);
  color: #fff; border-color: #ea580c;
}

/* Gender toggle selected state */
.gender-btn.selected {
  border-color: #660066;
  background: #660066;
  color: #fff;
}

/* Missing cell */
.grid-cell.cell-missing {
  background: #f3f4f6;
  color: #d1d5db;
  border: 1.5px solid #e5e7eb;
}

/* Present — 1 occurrence */
.grid-cell.cell-1x {
  background: #f9e6f9;
  color: #660066;
  border: 1.5px solid #e5b3e5;
}

/* Present — 2 occurrences */
.grid-cell.cell-2x {
  background: #e5b3e5;
  color: #4d004d;
  border: 1.5px solid #cc66cc;
  font-size: 1.15rem;
}

/* Present — 3 occurrences */
.grid-cell.cell-3x {
  background: #cc66cc;
  color: #330033;
  border: 1.5px solid #993399;
  font-size: 0.95rem;
}

/* Present — 4+ occurrences */
.grid-cell.cell-4x {
  background: #660066;
  color: #fff;
  border: 1.5px solid #4d004d;
  font-size: 0.8rem;
}

/* Center cell (5) — dashed border when missing */
.grid-cell.center-cell.cell-missing {
  border: 2px dashed #e5b3e5;
  background: #f9e6f9;
  color: #e5b3e5;
}

/* ── Embed mode: hide chrome ── */
body.embed-mode {
  background: transparent !important;
}

body.embed-mode #ad-header,
body.embed-mode #ad-inline,
body.embed-mode nav,
body.embed-mode footer,
body.embed-mode .embed-section,
body.embed-mode #seo-section,
body.embed-mode #hero-heading {
  display: none !important;
}

body.embed-mode section:first-of-type {
  padding-top: 0.5rem;
}

body.embed-mode #input-card {
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}

body.embed-mode #input-card label {
  color: #fff !important;
}

body.embed-mode #input-card .text-gray-400 {
  color: rgba(255, 255, 255, 0.65) !important;
}

body.embed-mode .gender-btn {
  background: #fff !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #660066 !important;
}
body.embed-mode .gender-btn.selected {
  background: #FFB540 !important;
  border-color: #FFB540 !important;
  color: #660066 !important;
}

/* ── Number input — hide spinners ── */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* ── Mobile tweaks ── */
@media (max-width: 640px) {
  h1 { font-size: 1.6rem; }
  .grid-cell { min-height: 60px; font-size: 1.1rem; }
  .grid-cell.cell-2x { font-size: 0.9rem; }
  .grid-cell.cell-3x { font-size: 0.75rem; }
  .grid-cell.cell-4x { font-size: 0.65rem; }
}