/* Reset & base */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  color: #fff;
  background: radial-gradient(circle at top, #1f004d, #000);
  /* font-family removed to keep original font */
}

/* Layout */
body.layout main {
  flex: 1 0 auto; /* grow main to push footer down */
}

footer, footer.footer {
  flex-shrink: 0;
  background: transparent !important;
  color: #cc99ff;
  text-shadow: 0 0 5px #ff66ff;
  border-top: 1px solid #ff66ff44;
  padding: 1rem 1rem 1.5rem;
  text-align: center;
  margin-top: auto;
  box-shadow: none;
}

/* Headers & titles */
h1.title {
  background: linear-gradient(to right, #ff6ec4, #7873f5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  color: #ffccff; /* fallback */
  text-shadow: 0 0 10px #ff66ff;
  margin: 0;
}

p.subtitle {
  color: #ddddff;
  font-weight: 500;
  text-shadow: 0 0 6px #aa88ff;
  margin: 0 0 2rem 0;
  text-align: center;
}

/* Glow heading styles (alternative to box) */
.has-unicorn-heading {
  color: #ffccff;
  text-align: center;
  text-shadow: 0 0 12px #ff66ff, 0 0 24px #cc00cc;
  margin-bottom: 0.5rem;
}

.has-unicorn-subtitle {
  color: #ddddff;
  text-align: center;
  font-weight: 500;
  text-shadow: 0 0 8px #aa88ff;
  margin-bottom: 2rem;
}

/* Glow effect box - header */
.has-unicorn-glow {
  background: linear-gradient(135deg, #3a005a, #1a0033);
  border: none;
  border-radius: 1rem;
  box-shadow: 0 0 20px #ff00ff88;
  padding: 2rem;
  margin-bottom: 2rem;
  transition: box-shadow 0.3s ease;
}

.has-unicorn-glow:hover {
  box-shadow: 0 0 25px rgba(255, 182, 255, 0.7), 0 0 10px rgba(255, 105, 180, 0.6);
}

/* Result container */
.has-unicorn-results {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 2rem;
  margin-top: 2rem;
  color: #eee;
  transition: all 0.3s ease-in-out;
}

.has-unicorn-results:hover {
  box-shadow: 0 0 20px rgba(135, 206, 250, 0.6);
}

/* Inputs */
.input.is-unicorn {
  border: 2px solid #e0b3ff;
  border-radius: 12px;
  box-shadow: inset 0 0 5px rgba(255, 182, 255, 0.2);
  transition: all 0.3s ease-in-out;
}

.input.is-unicorn:focus {
  border-color: #ff99ff;
  box-shadow: 0 0 8px rgba(255, 105, 180, 0.6);
}

/* Buttons */
.button.has-unicorn-button {
  background: linear-gradient(90deg, #ff6ec4, #7873f5);
  color: white;
  border: none;
  box-shadow: 0 4px 10px rgba(255, 182, 255, 0.4);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.button.has-unicorn-button:hover {
  background: linear-gradient(90deg, #fcb1ff, #b5a9ff);
  box-shadow: 0 6px 14px rgba(255, 182, 255, 0.7);
}

/* Special result card */
.is-unicorn-result {
  background: linear-gradient(135deg, #2b0055, #4b0082);
  box-shadow:
    0 0 10px #bb33ff,
    0 0 20px #9933ff,
    0 0 30px #aa55ff;
  border-radius: 20px;
  padding: 2rem;
  color: #e0b3ff;
  font-size: 1.6rem;
  letter-spacing: 0.07em;
  text-shadow:
    0 0 5px #dd99ff,
    0 0 10px #cc77ff;
  animation: sparkle 3s infinite alternate;
  max-width: 500px;
  margin: 0 auto;
  /* font-family removed to keep original font */
}

@keyframes sparkle {
  0% {
    box-shadow:
      0 0 10px #bb33ff,
      0 0 20px #9933ff,
      0 0 30px #aa55ff;
  }
  100% {
    box-shadow:
      0 0 15px #ee77ff,
      0 0 30px #bb33ff,
      0 0 40px #dd88ff;
  }
}

/* Glow bar container */
.glow-bar-container {
  background: #1a0033;
  border-radius: 15px;
  padding: 1rem;
  margin: 1rem 0;
  max-width: 600px;
  color: #e0b3ff;
  /* font-family removed to keep original font */
  box-shadow: 0 0 15px #bb33ff99 inset;
}

.glow-bar-label {
  margin-bottom: 0.4rem;
  font-weight: bold;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
}

/* Glow bar */
.glow-bar {
  position: relative;
  height: 25px;
  background: #330066;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 5px #bb33ffaa, inset 0 0 10px #9933ffaa;
}

.glow-bar-fill {
  height: 100%;
  border-radius: 12px;
  background: linear-gradient(90deg, #bb33ff, #ee77ff);
  box-shadow: 0 0 10px #ee77ff, 0 0 15px #bb33ff;
  transition: width 0.8s ease-in-out;
}

.glow-bar-value {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #ffe6ff;
  font-weight: bold;
  text-shadow: 0 0 5px #ee77ff;
  user-select: none;
}

/* Card content padding */
.card-content {
  padding: 2rem;
}

/* Text shadows for title and paragraph inside cards */
.title, .card-content p {
  text-shadow: 0 0 4px #000;
}