/**
 * @copyright Copyright 2025 JoeChiazza.com. All rights reserved.
 */
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap");

body {
  background-color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  font-family: "Cinzel", serif;
  overflow: hidden;
}

.CosmicIcosahedron-container {
  text-align: center;
  perspective: 100px; /* For 3D effects */
}

/* The cosmic orb */
.CosmicIcosahedron {
  width: 400px;
  height: 400px;
  display: inline-block; /* This ensures the orb respects the parent's text-align: center */
  /* Create a layered, glassy, glowing effect */
  background: radial-gradient(
    ellipse at center,
    rgb(0, 0, 0) 0%,
    rgb(0, 0, 0) 10%,
    rgb(0, 0, 0) 50%,
    rgb(0, 0, 0) 100%
  );
  border-radius: 50%;
  position: relative;
  /* The "exuberant" glow, pushed "deeper" with a large, soft shadow */
  box-shadow: inset 2px 2px 3px rgba(51, 51, 110, 0.938),
    /* Inner highlight */ inset 15px 0 60px #3e0f96,
    /* Inner shadow */ 0 0 50px 20px rgba(71, 52, 194, 0.473),
    /* Main outer glow */ 0 0 80px 10px rgb(44, 4, 109); /* Wider ambient glow */

  user-select: none;
  transition: transform 0.5s ease-out;
}

.CosmicIcosahedron:active {
  transform: scale(0.98);
}

/* The window where the answer appears */
.answer-window {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background-color: #060653b0; /* Refactored without corruption */
  border-radius: 50%;
  opacity: 0;
  box-shadow: inset 0 0 25px 15px rgba(24, 3, 119, 0.411),
    inset 1px 1px 1px rgb(184, 211, 230);
  transition: opacity 3s ease-in-out;
  overflow: hidden;
}

/* The swirling cosmic ethers inside the window */
.answer-window::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* A mix of gradients to create a nebula/ether effect */
  background-image: radial-gradient(
      circle at 55%,
      rgba(144, 0, 247, 0.829) 0%,
      transparent 50%
    ),
    radial-gradient(circle at 65%, rgba(29, 5, 137, 0.658) 0%, transparent 40%);
  animation: swirl 14s linear infinite, morphGradient 5s ease-in-out infinite;
  z-index: 2; /* Place it behind the triangle (z-index: 2) */
}

/* The white die triangle floating inside */
.answer-triangle {
  width: 0;
  height: 0;
  border-left: 92px solid transparent;
  border-right: 92px solid transparent;
  border-bottom: 148px solid #e8e8e8;
  position: absolute;
  top: 40%; /* Position from the vertical center */
  left: 50%;
  /* Center the element, then apply initial offsets */
  transform: translate(-50%, -50%) translateY(40px) scale(0.5);
  opacity: 0;
  transition: opacity 0.3s, transform 5.7s cubic-bezier(0.36, 0.25, 0.19, 0.15);
  z-index: 1; /* Placed it above  (z-index: 1) */
}

.CosmicIcosahedron.is-aiming.revealing .answer-text {
  /* The old text must fade out completely */
  opacity: 0;
}

.charging .answer-triangle {
  opacity: 0.7;
  /* Maintain horizontal centering while charging */
  transform: translateX(-50%) translateY(40px) scale(0.85);
}

.revealing .answer-triangle {
  opacity: 1;
  /* The final position is now a static, perfect center. */
  transform: translate(-50%, -50%) scale(0.9); /* Scaled down slightly to fit in the window */
  animation: float 5s ease-in-out infinite; /* Animation now uses the new scale */
}

/* The answer text itself */
.answer-text {
  color: #000000;
  /* Font size reduced slightly to better accommodate the longest answers. */
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  position: absolute;
  /* Positioned to be centered on the face of the parent triangle */
  /* Width is now auto-sized by content, up to max-width */
  left: 50%;
  /* Using a pixel value for `top` provides reliable vertical positioning
       down from the triangle's tip, centering the text block. */
  top: 85px;
  transform: translate(-50%, -50%);
  z-index: 3;
  opacity: 0;
  /* Set a max-width to allow text to wrap gracefully.
       Adjusted to fit the width of the scaled-down triangle face. */
  max-width: 90px;
  text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3);
  /* The text fades in last for a dramatic reveal */
  transition: opacity 0.5s ease-in 0.5s;
  pointer-events: none;
}

.instructions {
  color: #bdc3c7;
  margin-top: 25px;
  font-size: 1.2em;
}

/* State classes controlled by JavaScript */
.revealing .answer-window {
  opacity: 1;
}
.revealing .answer-text {
  opacity: 1;
}

/* Animations */
@keyframes float {
  /* The float animation is now relative to the new static, centered position */
  0% {
    transform: translate(-50%, -50%) translateY(5px) scale(0.9);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-1px) scale(0.9);
  }
  100% {
    transform: translate(-50%, -50%) translateY(5px) scale(0.9);
  }
}

@keyframes swirl {
  0% {
    transform: rotate(0deg) scale(1.4);
    opacity: 0.5;
  }
  50% {
    transform: rotate(180deg) scale(1.7);
    opacity: 0.8;
  }
  100% {
    transform: rotate(360deg) scale(1.4);
    opacity: 0.5;
  }
}

/* Media query for larger screens - make the Cosmic Icosahedron 175% larger */
@media (min-width: 768px) {
  .CosmicIcosahedron {
    width: 700px;
    height: 700px;
  }

  .answer-window {
    width: 350px;
    height: 350px;
  }

  .answer-triangle {
    border-left: 161px solid transparent;
    border-right: 161px solid transparent;
    border-bottom: 259px solid #e8e8e8;
  }

  .answer-text {
    font-size: 21px;
    top: 149px;
    max-width: 158px;
  }

  .instructions {
    font-size: 2.1em;
  }
}