/* =============================================================================
   ILS Place Value Machine CSS — PV machine widget styles
   Extracted from 1a3.astro | v1.0
   ============================================================================= */

/* ===== PLACE VALUE MACHINE ===== */
.lnp-pv-machine {
  position: sticky;
  top: 8px;
  z-index: 5;
  background: linear-gradient(180deg, #f8fafc, #eef2ff);
  border: 2px solid #c7d2fe;
  border-radius: 14px;
  padding: 10px;
  margin: 10px 0 14px;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.12);
}
.lnp-pv-title {
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  color: #4338ca;
  margin-bottom: 8px;
  letter-spacing: 0.3px;
}
.lnp-pv-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
}
.lnp-pv-cell {
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  padding: 8px 4px;
  text-align: center;
  min-height: 62px;
  transition: all 0.25s ease;
}
.lnp-pv-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  line-height: 1.2;
  min-height: 24px;
}
.lnp-pv-digit {
  display: block;
  font-size: 20px;
  font-weight: 900;
  color: #334155;
  line-height: 1.1;
}
.lnp-pv-cell.lnp-pv-highlight {
  border-color: #6366f1;
  background: #eef2ff;
  animation: lnpPVPop 0.5s ease;
}

@keyframes lnpPVPop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

/* ===== CARRY / TARGET HIGHLIGHTS ===== */
.lnp-pv-cell.lnp-pv-carry {
  border-color: #f59e0b;
  background: #fffbeb;
  animation: lnpCarryPop 0.7s ease;
}
.lnp-pv-cell.lnp-pv-target {
  border-color: #22c55e;
  background: #dcfce7;
  animation: lnpCarryTarget 1s ease;
}

@keyframes lnpCarryPop {
  0% {
    transform: translateY(0) scale(1);
  }
  30% {
    transform: translateY(-4px) scale(1.04);
  }
  60% {
    transform: translateY(0) scale(1);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
@keyframes lnpCarryTarget {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45);
  }
  100% {
    box-shadow: 0 0 0 12px rgba(34, 197, 94, 0);
  }
}

/* =============================================================================
   DARK MODE
   ============================================================================= */
.dark .lnp-pv-machine {
  background: linear-gradient(180deg, #1e293b, #312e81);
  border-color: #4338ca;
}
.dark .lnp-pv-title {
  color: #a5b4fc;
}
.dark .lnp-pv-cell {
  background: #0f172a;
  border-color: #334155;
}
.dark .lnp-pv-label {
  color: #94a3b8;
}
.dark .lnp-pv-digit {
  color: #e2e8f0;
}
.dark .lnp-pv-cell.lnp-pv-highlight {
  border-color: #6366f1;
  background: #312e81;
}
.dark .lnp-pv-cell.lnp-pv-carry {
  border-color: #f59e0b;
  background: #451a03;
}
.dark .lnp-pv-cell.lnp-pv-target {
  border-color: #22c55e;
  background: #064e3b;
}

/* =============================================================================
   RESPONSIVE — 480px breakpoint
   ============================================================================= */
@media (max-width: 480px) {
  .lnp-pv-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 3px;
  }
  .lnp-pv-label {
    font-size: 8px;
  }
  .lnp-pv-digit {
    font-size: 16px;
  }
  .lnp-pv-cell {
    padding: 6px 2px;
    min-height: 50px;
  }
}