/* ═══════════════════════════════════════════
   Spiral Oracle — Cosmic Shimmer Theme
   ═══════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  background: #080810;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(88, 28, 135, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(30, 58, 138, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(109, 40, 217, 0.08) 0%, transparent 50%);
  color: #e0d4ff;
  font-family: 'Cormorant Garamond', Georgia, serif;
  overflow-x: hidden;
  position: relative;
}

.hidden {
  display: none !important;
}

/* ═══════════════════════════════════════════
   Stars
   ═══════════════════════════════════════════ */

.stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 25% 35%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 40% 10%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 55% 60%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 70% 25%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 85% 45%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 15% 70%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1px 1px at 30% 85%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 60% 80%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 90% 70%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1.5px 1.5px at 5% 50%, rgba(200, 180, 255, 0.6), transparent),
    radial-gradient(1.5px 1.5px at 48% 40%, rgba(180, 200, 255, 0.5), transparent),
    radial-gradient(1px 1px at 75% 90%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1px 1px at 95% 10%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 50% 20%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 20% 95%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(2px 2px at 35% 55%, rgba(180, 160, 255, 0.4), transparent),
    radial-gradient(1px 1px at 65% 5%, rgba(255, 255, 255, 0.6), transparent);
  animation: starTwinkle 8s ease-in-out infinite alternate;
}

@keyframes starTwinkle {
  0%   { opacity: 0.6; }
  50%  { opacity: 1; }
  100% { opacity: 0.7; }
}

/* ═══════════════════════════════════════════
   Fireflies
   ═══════════════════════════════════════════ */

.fireflies {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.firefly {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 180, 255, 0.9), rgba(140, 100, 255, 0.4), transparent);
  box-shadow:
    0 0 6px 2px rgba(180, 140, 255, 0.5),
    0 0 12px 4px rgba(140, 100, 255, 0.2);
  animation: fireflyDrift var(--duration) ease-in-out infinite alternate,
             fireflyGlow var(--glow-duration) ease-in-out infinite;
}

.firefly:nth-child(1)  { left: 8%;  top: 15%; --duration: 12s; --glow-duration: 3s; animation-delay: 0s; }
.firefly:nth-child(2)  { left: 22%; top: 60%; --duration: 15s; --glow-duration: 4s; animation-delay: -2s; }
.firefly:nth-child(3)  { left: 45%; top: 30%; --duration: 18s; --glow-duration: 3.5s; animation-delay: -5s; }
.firefly:nth-child(4)  { left: 70%; top: 75%; --duration: 14s; --glow-duration: 2.8s; animation-delay: -1s; }
.firefly:nth-child(5)  { left: 90%; top: 20%; --duration: 16s; --glow-duration: 4.2s; animation-delay: -7s; }
.firefly:nth-child(6)  { left: 15%; top: 85%; --duration: 20s; --glow-duration: 3.2s; animation-delay: -3s; }
.firefly:nth-child(7)  { left: 55%; top: 50%; --duration: 13s; --glow-duration: 3.8s; animation-delay: -6s; }
.firefly:nth-child(8)  { left: 80%; top: 40%; --duration: 17s; --glow-duration: 2.5s; animation-delay: -4s; }
.firefly:nth-child(9)  { left: 35%; top: 90%; --duration: 19s; --glow-duration: 4.5s; animation-delay: -8s; }
.firefly:nth-child(10) { left: 60%; top: 10%; --duration: 11s; --glow-duration: 3.1s; animation-delay: -2s; }
.firefly:nth-child(11) { left: 5%;  top: 45%; --duration: 22s; --glow-duration: 3.6s; animation-delay: -9s; }
.firefly:nth-child(12) { left: 75%; top: 55%; --duration: 14s; --glow-duration: 4.8s; animation-delay: -1s; }
.firefly:nth-child(13) { left: 40%; top: 70%; --duration: 16s; --glow-duration: 2.9s; animation-delay: -5s; }
.firefly:nth-child(14) { left: 25%; top: 25%; --duration: 21s; --glow-duration: 3.4s; animation-delay: -3s; }
.firefly:nth-child(15) { left: 95%; top: 85%; --duration: 18s; --glow-duration: 4.1s; animation-delay: -7s; }

@keyframes fireflyDrift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(30px, -20px); }
  50%  { transform: translate(-15px, 25px); }
  75%  { transform: translate(20px, 10px); }
  100% { transform: translate(-25px, -15px); }
}

@keyframes fireflyGlow {
  0%, 100% { opacity: 0.2; }
  30%      { opacity: 0.8; }
  50%      { opacity: 1; }
  70%      { opacity: 0.6; }
}

/* ═══════════════════════════════════════════
   Main Layout
   ═══════════════════════════════════════════ */

.oracle-main {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 2rem 1.5rem;
}

/* ═══════════════════════════════════════════
   Header / Title
   ═══════════════════════════════════════════ */

.oracle-header {
  text-align: center;
  margin-bottom: 3rem;
  animation: fadeInDown 1.5s ease-out;
}

.oracle-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(2.2rem, 6vw, 3.5rem);
  font-weight: 600;
  color: #f0e6ff;
  letter-spacing: 0.15em;
  text-shadow:
    0 0 20px rgba(168, 120, 255, 0.6),
    0 0 40px rgba(138, 80, 255, 0.3),
    0 0 80px rgba(120, 60, 255, 0.15);
  margin-bottom: 0.4em;
}

.oracle-subtitle {
  font-size: 1.2rem;
  color: rgba(200, 180, 240, 0.7);
  font-style: italic;
  letter-spacing: 0.1em;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════
   Draw Section — Card Back
   ═══════════════════════════════════════════ */

.draw-section {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  animation: fadeIn 2s ease-out;
}

.card-back {
  width: 240px;
  height: 360px;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  background: linear-gradient(145deg, #1a0a2e, #0d0620);
  border: 1px solid rgba(168, 120, 255, 0.3);
  box-shadow:
    0 0 30px rgba(138, 80, 255, 0.2),
    0 0 60px rgba(100, 50, 200, 0.1),
    inset 0 0 30px rgba(138, 80, 255, 0.05);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.card-back::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(168, 120, 255, 0.15);
  border-radius: 12px;
  pointer-events: none;
}

.card-back::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    transparent 30%,
    rgba(168, 120, 255, 0.08) 50%,
    transparent 70%
  );
  background-size: 200% 200%;
  animation: sheen 4s ease-in-out infinite;
  pointer-events: none;
}

.card-back:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow:
    0 0 40px rgba(168, 120, 255, 0.35),
    0 0 80px rgba(120, 60, 255, 0.15),
    inset 0 0 40px rgba(168, 120, 255, 0.08);
  border-color: rgba(168, 120, 255, 0.5);
}

.card-back:active {
  transform: scale(0.97);
  transition: transform 0.1s ease;
}

.card-back-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 1.5rem;
}

.spiral-symbol {
  font-size: 4rem;
  filter: drop-shadow(0 0 12px rgba(168, 120, 255, 0.5));
  animation: spiralPulse 3s ease-in-out infinite;
}

.draw-prompt {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  color: rgba(200, 180, 240, 0.6);
  font-style: italic;
  letter-spacing: 0.1em;
}

@keyframes sheen {
  0%   { background-position: -200% -200%; }
  100% { background-position: 200% 200%; }
}

@keyframes spiralPulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50%      { transform: scale(1.08); opacity: 1; }
}

/* ═══════════════════════════════════════════
   Reveal Section — Drawn Card
   ═══════════════════════════════════════════ */

.reveal-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  animation: cardReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-section.fading-out {
  animation: fadeOut 0.5s ease-out forwards;
}

.card-reveal {
  text-align: center;
  max-width: 600px;
  width: 100%;
}

.card-image-wrap {
  margin-bottom: 2rem;
  position: relative;
  display: inline-block;
}

.card-image-wrap::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(168, 120, 255, 0.3), rgba(100, 200, 255, 0.15), rgba(168, 120, 255, 0.3));
  z-index: -1;
  filter: blur(8px);
  animation: glowPulse 4s ease-in-out infinite;
}

.card-image {
  max-width: 300px;
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(168, 120, 255, 0.3);
  box-shadow:
    0 4px 30px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(138, 80, 255, 0.15);
  display: block;
}

.card-name {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 600;
  color: #f0e6ff;
  letter-spacing: 0.08em;
  margin-bottom: 1.2rem;
  text-shadow: 0 0 15px rgba(168, 120, 255, 0.4);
}

.card-meaning {
  font-size: 1.15rem;
  line-height: 1.8;
  color: rgba(220, 210, 240, 0.85);
  font-style: italic;
  margin-bottom: 1.8rem;
  padding: 0 1rem;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  white-space: pre-line;
}

.card-keywords {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 2rem;
}

.keyword-tag {
  display: inline-block;
  padding: 0.35em 0.9em;
  font-size: 0.85rem;
  color: rgba(180, 160, 220, 0.8);
  border: 1px solid rgba(168, 120, 255, 0.2);
  border-radius: 20px;
  background: rgba(168, 120, 255, 0.06);
  letter-spacing: 0.04em;
}

@keyframes cardReveal {
  0%   { opacity: 0; transform: scale(0.8) translateY(30px); }
  60%  { opacity: 1; }
  100% { transform: scale(1) translateY(0); }
}

@keyframes fadeOut {
  to { opacity: 0; transform: translateY(-10px); }
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* ═══════════════════════════════════════════
   Draw Again Button
   ═══════════════════════════════════════════ */

.draw-again-btn {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  letter-spacing: 0.1em;
  padding: 0.8em 2em;
  border: 1px solid rgba(168, 120, 255, 0.3);
  border-radius: 30px;
  background: rgba(168, 120, 255, 0.08);
  color: #d4c4f0;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 1rem;
  margin-bottom: 2rem;
}

.draw-again-btn:hover {
  background: rgba(168, 120, 255, 0.15);
  border-color: rgba(168, 120, 255, 0.5);
  box-shadow: 0 0 20px rgba(168, 120, 255, 0.2);
  transform: translateY(-2px);
}

.spiral-icon {
  font-size: 1.1em;
}

/* ═══════════════════════════════════════════
   Footer
   ═══════════════════════════════════════════ */

.oracle-footer {
  margin-top: auto;
  padding: 2rem 0;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(160, 140, 200, 0.4);
  letter-spacing: 0.08em;
}

/* ═══════════════════════════════════════════
   Lockout State
   ═══════════════════════════════════════════ */

.lockout-section {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  animation: fadeIn 2s ease-out;
}

.lockout-message {
  text-align: center;
  max-width: 420px;
  padding: 2rem;
}

.lockout-icon {
  font-size: 3.5rem;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 0 15px rgba(168, 120, 255, 0.3));
  animation: spiralPulse 4s ease-in-out infinite;
}

.lockout-title {
  font-family: 'Cinzel', serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: rgba(220, 200, 255, 0.8);
  letter-spacing: 0.1em;
  margin-bottom: 1.2rem;
  text-shadow: 0 0 15px rgba(168, 120, 255, 0.25);
}

.lockout-text {
  font-size: 1.1rem;
  line-height: 1.8;
  color: rgba(200, 180, 230, 0.6);
  font-style: italic;
  margin-bottom: 1.5rem;
}

.lockout-subtext {
  font-size: 0.95rem;
  color: rgba(180, 160, 210, 0.4);
  letter-spacing: 0.06em;
}

/* ═══════════════════════════════════════════
   General Animations
   ═══════════════════════════════════════════ */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ═══════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════ */

@media (max-width: 480px) {
  .card-back {
    width: 200px;
    height: 300px;
  }

  .card-image {
    max-width: 260px;
  }

  .oracle-main {
    padding: 1.5rem 1rem;
  }

  .card-meaning {
    font-size: 1.05rem;
    padding: 0 0.5rem;
  }
}