/* Custom Styles for K-Destiny (With Tailwind) */

/* Background Stars */
.bg-night {
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
}

.stars {
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow:
    1744px 122px #fff,
    134px 1321px #fff,
    456px 876px #fff,
    876px 123px #fff,
    1200px 800px #fff,
    400px 500px #fff,
    900px 200px #fff,
    1500px 600px #fff,
    200px 1000px #fff,
    1800px 400px #fff;
  animation: animStar 100s linear infinite;
}

.stars:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow:
    1744px 122px #fff,
    134px 1321px #fff,
    456px 876px #fff,
    876px 123px #fff,
    1200px 800px #fff,
    400px 500px #fff,
    900px 200px #fff,
    1500px 600px #fff,
    200px 1000px #fff,
    1800px 400px #fff;
}

@keyframes animStar {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2000px);
  }
}

/* Glassmorphism Panel */
.glass-panel {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Custom Spinner */
.mystic-spinner {
  width: 50px;
  height: 50px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  border-top-color: #ffd700;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Background Glow */
.highlight-gradient {
  background: radial-gradient(
    circle at 50% 50%,
    rgba(76, 29, 149, 0.2),
    transparent 70%
  );
}

/* Form Input Override */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.5;
  cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Remove Number Input Spinner */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* AdSense Placements */
.adsense-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  margin: 20px 0;
  overflow: hidden;
  text-align: center;
  color: rgba(255, 255, 255, 0.2);
  font-size: 0.8rem;
}

/* Responsive Heights for CLS Optimization */
.adsense-top, .adsense-bottom {
  width: 100%;
  min-height: 100px; /* Mobile Banner Height */
}

.adsense-middle {
  width: 100%;
  min-height: 250px; /* Rectangle Ad Height */
}

@media (min-width: 768px) {
  .adsense-top, .adsense-bottom {
    min-height: 90px; /* Leaderboard */
  }
}