/* ChipsAway Damage Calculator — custom touches on top of Tailwind */

html { scroll-behavior: smooth; }

.car-stage {
  background:
    radial-gradient(1200px 400px at 50% -10%, rgba(13,110,253,0.10), transparent 60%),
    radial-gradient(800px 300px at 50% 110%, rgba(0,148,170,0.10), transparent 60%),
    linear-gradient(180deg, #fafbff 0%, #f1f4fb 100%);
  border-radius: 1.5rem;
  border: 1px solid #e2e8f0;
  padding: 1rem;
  position: relative;
  overflow: hidden;
}

.car-svg { width: 100%; height: auto; display: block; }

.car-part {
  cursor: pointer;
  transition: filter 180ms ease, transform 180ms ease, fill 180ms ease, stroke 180ms ease;
  transform-box: fill-box;
  transform-origin: center;
}

.car-part:hover { filter: drop-shadow(0 0 0.5rem rgba(13,110,253,0.35)); }
.car-part.is-active { fill: #0d6efd !important; stroke: #0a58ca !important; }
.car-part.is-active + .car-label text,
.car-label.is-active text { fill: #0d6efd; font-weight: 700; }

.car-label text {
  font: 600 10px Inter, system-ui, sans-serif;
  fill: #64748b;
  pointer-events: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (min-width: 640px) { .car-label text { font-size: 11px; } }

/* Damage grid buttons */
.dmg-btn {
  display: flex; align-items: center; gap: 0.6rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 0.9rem;
  padding: 0.7rem 0.8rem;
  text-align: left;
  font-weight: 600;
  color: #243049;
  transition: all 160ms ease;
  cursor: pointer;
}
.dmg-btn:hover { border-color: #0d6efd55; transform: translateY(-1px); }
.dmg-btn.is-active {
  border-color: #0d6efd;
  background: #e7f1ff;
  color: #0a58ca;
  box-shadow: 0 0 0 3px rgba(13,110,253,0.10);
}
.dmg-btn .ico {
  width: 34px; height: 34px; border-radius: 10px;
  background: #f1f5f9; color: #0d6efd;
  display: grid; place-items: center; flex: 0 0 34px;
}
.dmg-btn.is-active .ico { background: #0d6efd; color: #fff; }
.dmg-btn .lbl { font-size: 0.92rem; line-height: 1.1; }
.dmg-btn .sub { font-size: 0.72rem; color: #64748b; font-weight: 500; margin-top: 1px; }

/* Severity buttons */
.sev-btn { transition: all 160ms ease; background: #fff; }
.sev-btn:hover { border-color: #0d6efd55; }
.sev-btn.is-active { background: #0d6efd; color: #fff; border-color: #0d6efd; box-shadow: 0 0 0 3px rgba(13,110,253,0.10); }

/* Subtle reveal on result */
#resultCard { transition: transform 240ms ease; }
#resultCard.is-shake { animation: shake 320ms ease; }
@keyframes shake {
  0% { transform: translateY(6px); opacity: 0.7; }
  100% { transform: translateY(0); opacity: 1; }
}

/* Mobile tightening */
@media (max-width: 480px) {
  .car-stage { padding: 0.5rem; border-radius: 1rem; }
  .dmg-btn { padding: 0.6rem 0.7rem; }
  .dmg-btn .lbl { font-size: 0.85rem; }
}