/* TWINMIND - Cosmic Gemini Aesthetics */

:root {
  --twin-a: #22d3ee; /* cyan */
  --twin-b: #a855f7; /* purple */
}

* {
  -webkit-font-smoothing: antialiased;
}

body {
  background: #09090b;
  min-height: 100vh;
}

/* Cosmic gradient background */
.cosmic-bg {
  background:
    radial-gradient(ellipse at top left, rgba(168, 85, 247, 0.15), transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(34, 211, 238, 0.12), transparent 50%),
    radial-gradient(ellipse at center, rgba(236, 72, 153, 0.08), transparent 60%),
    #09090b;
  animation: cosmic-drift 25s ease infinite;
  background-size: 200% 200%;
}

@keyframes cosmic-drift {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
}

/* Twinkling stars */
.stars {
  background-image:
    radial-gradient(1px 1px at 20% 30%, white, transparent),
    radial-gradient(1px 1px at 60% 70%, white, transparent),
    radial-gradient(1px 1px at 50% 50%, rgba(255,255,255,0.6), transparent),
    radial-gradient(2px 2px at 80% 10%, white, transparent),
    radial-gradient(1px 1px at 90% 60%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 33% 80%, white, transparent),
    radial-gradient(1px 1px at 15% 65%, rgba(255,255,255,0.7), transparent),
    radial-gradient(2px 2px at 70% 35%, white, transparent),
    radial-gradient(1px 1px at 45% 15%, white, transparent);
  background-size: 100% 100%;
  opacity: 0.5;
  animation: twinkle 4s ease infinite alternate;
}

@keyframes twinkle {
  from { opacity: 0.3; }
  to { opacity: 0.7; }
}

/* Vibe card gradient effect */
.vibe-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--vibe-gradient, linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(34, 211, 238, 0.2)));
  opacity: 0.6;
  z-index: 0;
  transition: background 0.6s ease;
}

/* Range slider styling */
input[type="range"] {
  height: 6px;
  border-radius: 3px;
  background: #27272a;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  transition: transform 0.2s;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  border: none;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* Idea card animation */
.idea-card {
  animation: slide-in 0.3s ease;
}

@keyframes slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Pulse for active states */
.pulse {
  animation: pulse-glow 2s ease infinite;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(168, 85, 247, 0); }
}

/* Smooth transitions for content */
.fade-in {
  animation: fade-in 0.5s ease;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Mission button completed state */
.mission-done {
  background: linear-gradient(135deg, #10b981, #06b6d4) !important;
  color: white !important;
}

/* Twin debate card */
.twin-debate {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.05), rgba(168, 85, 247, 0.05));
}

/* Winner glow */
.winner-glow {
  box-shadow: 0 0 30px rgba(250, 204, 21, 0.3);
  border-color: rgba(250, 204, 21, 0.5) !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #09090b; }
::-webkit-scrollbar-thumb { background: #27272a; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3f3f46; }