/*
 * Global styles for the IP Fortune Teller website.
 * The page is responsive by using viewport units for sizing
 * the crystal ball.  A dark background emphasises the glowing
 * text inside the ball.  The chosen font and colours mirror the
 * digital, sci‑fi vibe from the supplied reference image.
 */

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: #0b0c10; /* deep almost‑black backdrop */
  color: #e6e6e6;
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
}

/* Header styles for the page title and subtitle */
.page-header {
  text-align: center;
  padding: 1rem;
}

.page-header h1 {
  margin: 0.5rem 0 0.25rem;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  color: #aafafa;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
}

.page-header p {
  margin: 0;
  font-size: 0.9rem;
  color: #88b3c6;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

main.container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}

/* The crystal ball itself */
.crystal-ball {
  position: relative;
  /* Further increase the size of the crystal ball so that longer fortunes fit comfortably.
     Use a larger viewport unit and bump the max dimensions. */
  width: 85vmin;
  height: 85vmin;
  max-width: 600px;
  max-height: 600px;
  border-radius: 50%;
  background-image: url('crystal.png');
  background-size: cover;
  background-position: center;
  box-shadow:
    0 0 50px rgba(0, 255, 255, 0.3),    /* outer glow */
    inset 0 0 40px rgba(0, 255, 255, 0.2); /* inner glow */
  cursor: pointer;
  overflow: hidden;
  outline: none;
  transition: box-shadow 0.3s;
  position: relative;
}

/* Darkening layer inside the crystal ball to make overlaid text legible. */
.crystal-ball::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* Darken the centre of the crystal ball with a radial gradient so
     that the underlying photo text doesn’t compete with the fortunes.
     The gradient is strongest in the middle and fades toward the
     edges to preserve the glassy look. */
  /* Darken the centre further to completely obscure any pre‑existing
     text on the underlying image.  The gradient starts almost
     opaque in the middle and gradually fades toward the edges. */
  /* Soften the radial gradient to allow the glassy ball image to
     remain visible while still providing enough contrast for the
     overlay text.  The centre is semi‑transparent and fades out
     toward the edges. */
  background: radial-gradient(circle at 50% 50%,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.4) 40%,
    rgba(0, 0, 0, 0.15) 70%,
    rgba(0, 0, 0, 0) 100%);
  z-index: 0;
}

/* Additional darkened band to conceal any residual text on the
   underlying image.  This band sits above the radial gradient and
   darkens only the centre region where fortunes appear, leaving the
   rest of the ball clearer. */
/* .crystal-ball::after was previously used to cover text baked into the
   original background image.  The new crystal ball graphic has
   no embedded text, so this pseudo‑element is no longer needed. */

/* When the crystal ball receives keyboard focus, show a subtle ring */
.crystal-ball.focus {
  box-shadow:
    0 0 50px rgba(0, 255, 255, 0.5),
    inset 0 0 40px rgba(0, 255, 255, 0.3),
    0 0 0 3px rgba(0, 255, 255, 0.7);
}

/* Text displayed within the crystal ball */
.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  text-align: center;
  color: #aafafa;
  font-family: 'Orbitron', sans-serif;
  /* Scale the fortune text fluidly between small and large screens */
  font-size: clamp(1.1rem, 2.6vw, 1.6rem);
  line-height: 1.3;
  pointer-events: none; /* ensure clicks pass through to the ball */
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.8),
               0 0 20px rgba(0, 255, 255, 0.6);
  z-index: 2;
}

/* Subtle branding at the base of the ball */
.base-label {
  position: absolute;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
  /* Style the DarkHorse IT text like a small metallic plaque affixed
     to the base of the crystal ball.  Use a subtle gradient to
     suggest brushed metal and rounded corners. */
  font-size: 0.75rem;
  letter-spacing: 1px;
  font-family: 'Orbitron', sans-serif;
  color: #1a1a1a;
  background: linear-gradient(135deg, #b5b5b5, #e0e0e0, #b5b5b5);
  padding: 2px 6px;
  border-radius: 4px;
  box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.6), inset 0 0 5px rgba(0, 0, 0, 0.5);
}

footer {
  text-align: center;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  background: #0b0c10;
  color: #666;
}

footer a {
  color: #7799ff;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}