/* GENERAL STYLES */
body {
  margin: 0;
  background: #000;
  font-family: 'Arial', sans-serif;
  color: #fff;
}

.divi-kaiju-wrapper {
  text-align: center;
  padding: 2rem;
  overflow-x: hidden;
  position: relative;
}

/* OPTIONAL TITLE */
.kaiju-title {
  color: #fff;
  border: 3px solid red;
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-weight: bold;
  box-shadow: 0 0 15px red;
  animation: titleGlow 2s ease-in-out infinite alternate;
}

@keyframes titleGlow {
  from { box-shadow: 0 0 10px red; }
  to { box-shadow: 0 0 25px red; }
}

/* SPINNER LAYOUT */
.spinner-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

/* POINTER (CENTERED) */
.pointer-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  z-index: 20;
}

.pointer-static {
  width: clamp(80px, 25vw, 120px);
  height: auto;
  display: block;
  max-width: 100%;
  filter: drop-shadow(0 0 15px red);
  animation: pulsePointer 2.5s ease-in-out infinite alternate;
}

@keyframes pulsePointer {
  0% { transform: scale(1); }
  100% { transform: scale(1.05); }
}

/* SPINNER CONTAINER (CIRCULAR) */
.spinner-container {
  width: min(80vw, 300px);
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  border: 12px solid #000;
  box-shadow: 0 0 25px var(--glow-color, #00ffe0);
  position: relative;
}

/* SPINNER WHEEL COLORS */
.wheel {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    #104a18 0% 15%,
    #ff0000 15% 33%,
    #000799 33% 43%,
    #ffde00 43% 53%,
    #ff00ea 53% 68%,
    #500049 68% 78%,
    #ffa42f 78% 88%,
    #14caff 88% 93%,
    #5d5d5d 93% 98%,
    #5f3805 98% 100%
  );
  transition: transform 4s cubic-bezier(0.33, 1, 0.68, 1);
}

/* CENTER LOGO */
.centerpiece {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
}

/* BUTTONS */
.button-group {
  margin-top: 2rem;
}

.center-btn {
  margin: 0.5rem;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: #00ffe0;
  color: #000;
  transition: 0.3s;
}

.center-btn:hover {
  background: #00ccaa;
}

.center-btn.reset {
  background: crimson;
  color: white;
}

/* RESULT TEXT */
#result-text {
  margin-top: 2rem;
  font-size: 2rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
  animation: resultFlash 1.2s ease-in-out infinite alternate;
}

@keyframes resultFlash {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.05); opacity: 0.85; }
}

/* LEGEND SECTION */
.legend {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Always 3 columns */
  gap: 0.5rem;
  padding: 1rem 0;
  margin-top: 2rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.legend li {
  background-color: var(--color);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  color: #000;
  font-weight: bold;
  text-align: center;
  transition: transform 0.3s ease;
}

.legend li.glow {
  transform: scale(1.1);
  box-shadow: 0 0 10px var(--color), 0 0 20px var(--color);
}

/* RESPONSIVE ADJUSTMENTS */
@media (max-width: 768px) {
  .legend {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .legend {
    grid-template-columns: 1fr;
  }

  .spinner-container {
    width: 90vw;
  }

  .pointer-static {
    width: 80px;
  }
}

.spinner-flex-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.spinner-legend {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: rgba(0, 0, 0, 0.75);
  padding: 1rem;
  border-radius: 10px;
  color: #fff;
  font-family: sans-serif;
  max-width: 160px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.legend-color {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: inline-block;
  box-shadow: 0 0 5px #fff;
}