/* Extracted styles for Atomic Martian Clock */

body {
  background: #1a1a1a;
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;

}

.amc-header {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 1px;
  margin-top: 0;
  margin-bottom: 17px;
}

.amc-result {
  margin: 4px 0;
}

.amc-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 8px 0;
}

.amc-visual img {
  width: 125px;
  height: 125px;
  border-radius: 50%;
  display: block;
  margin: 0 auto;
  object-fit: cover;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* hide inline SVG fallback by default; JS will show it if image fails */
.amc-visual svg {
  display: none;
}

/* utility classes used by JS to show/hide fallbacks without inline styles */
.hidden { display: none !important; }
.visible { display: block !important; }

.amc-content {
  text-align: center;
}

.amc-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 12px 0 6px 0;
}

.amc-note {
  color: #ccc;
}

#mars-birthday-result {
  margin-top: 9px;
}

.amc-input-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin: 8px 0;
}

button#generate-martian-birthday {
  padding: 4px 12px;
  font-size: 1rem;
  cursor: pointer;
}

.amc-subheader {
  font-weight: 600;
  margin-bottom: 6px;
}

.amc-mars-date {
  margin-bottom: 10px;
  font-size: 1.08rem;
}

.amc-age-block {
  margin-top: 14px;
}

.amc-age-heading {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 2px;
}

/* panel border and subtle glowing effect */
.amc-panel {
  padding: 27px 27px;
  border-radius: 12px;
  border: 2px solid rgba(220,50,50,0.9);
  /* outer soft glow + layered, softer red inner glow for smooth fade */
  box-shadow:
    0 0 18px rgba(220,50,50,0.12),
    inset 0 0 8px rgba(220,50,50,0.06),
    inset 0 0 24px rgba(220,50,50,0.10),
    inset 0 0 48px rgba(220,50,50,0.08);
  transition: box-shadow 0.3s ease, transform 0.25s ease;
  backdrop-filter: blur(6px);
}

/* create a smooth inner glow using a pseudo-element so the fade looks nicer */
.amc-panel {
  position: relative;
  overflow: hidden;
}

.amc-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  /* radial gradient produces a smoother falloff than stacked inset shadows */
  background: radial-gradient(ellipse at center,
    rgba(220,50,50,0.28) 0%,
    rgba(220,50,50,0.16) 20%,
    rgba(220,50,50,0.08) 40%,
    rgba(220,50,50,0.04) 55%,
    transparent 72%);
  mix-blend-mode: screen;
  opacity: 0.45;
  transition: opacity 240ms ease;
}

.amc-panel:hover::before {
  opacity: 0.9;
}

@keyframes amc-inner-fade {
  0% { opacity: 0.45; }
  50% { opacity: 0.8; }
  100% { opacity: 0.45; }
}

.amc-panel.pulse::before {
  animation: amc-inner-fade 3s ease-in-out infinite;
}

/* Keep panel width stable so inner typing doesn't expand the border */
.amc-panel {
  box-sizing: border-box;
  /* target a narrower panel width (up to 400px), but allow smaller screens to shrink */
  width: min(92vw, 400px);
  max-width: 400px;
  min-width: 280px;
}

/* Ensure text will wrap inside the panel instead of widening it */
.amc-result,
.amc-subheader,
.amc-title,
.amc-mars-date,
#mars-birthday-result {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Constrain input so it doesn't push panel width */
.amc-input-row input[type="date"] {
  max-width: 220px;
  width: 160px;
}

.amc-panel:hover {
  box-shadow:
    0 0 28px rgba(220,50,50,0.18),
    inset 0 0 18px rgba(220,50,50,0.10),
    inset 0 0 36px rgba(220,50,50,0.20),
    inset 0 0 60px rgba(220,50,50,0.12);
  transform: translateY(-2px);
}

@keyframes amc-pulse {
  0% {
    box-shadow: 0 0 12px rgba(220,50,50,0.06), inset 0 0 8px rgba(220,50,50,0.04), inset 0 0 24px rgba(220,50,50,0.08), inset 0 0 48px rgba(220,50,50,0.06);
  }
  50% {
    box-shadow: 0 0 26px rgba(220,50,50,0.14), inset 0 0 12px rgba(220,50,50,0.08), inset 0 0 36px rgba(220,50,50,0.16), inset 0 0 72px rgba(220,50,50,0.09);
  }
  100% {
    box-shadow: 0 0 12px rgba(220,50,50,0.06), inset 0 0 8px rgba(220,50,50,0.04), inset 0 0 24px rgba(220,50,50,0.08), inset 0 0 48px rgba(220,50,50,0.06);
  }
}

.amc-panel.pulse {
  animation: amc-pulse 3s ease-in-out infinite;
}