:root {
  --bg-dark: #0d0d0d;
  --bg-purple: #1a0a2e;
  --purple-dark: #2a1a3a;
  --purple-mid: #6b4c9a;
  --gold: #ffd700;
  --gold-dark: #b8860b;
  --green-eerie: #00ff88;
  --red-ominous: #dc143c;
  --red-dark: #8b0000;
  --white-ghost: #f0f0f0;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Crimson Pro', Georgia, serif;
  background: linear-gradient(135deg, var(--bg-purple) 0%, var(--bg-dark) 50%, #0a0514 100%);
  min-height: 100vh;
  color: var(--white-ghost);
  overflow-x: hidden;
}

.font-cinzel {
  font-family: 'Cinzel', serif;
}

/* Particle Canvas */
.particle-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* App Container */
.app-container {
  position: relative;
  z-index: 1;
}

/* Title Glow Effect */
.title-glow {
  text-shadow: 
    0 0 10px var(--gold),
    0 0 20px var(--gold-dark),
    0 0 40px var(--gold-dark),
    0 0 80px rgba(255, 215, 0, 0.3);
  animation: titlePulse 3s ease-in-out infinite;
}

@keyframes titlePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

/* Fade In Animation */
.fade-in {
  animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Paw Container */
.paw-container {
  filter: drop-shadow(0 0 20px var(--green-eerie));
}

.paw-glow {
  filter: drop-shadow(0 0 5px var(--green-eerie));
}

.finger {
  transition: transform 0.5s ease-in-out;
}

.paw-container.curling .finger-0 { transform: rotate(-40deg) translateY(10px); }
.paw-container.curling .finger-1 { transform: rotate(-30deg) translateY(8px); }
.paw-container.curling .finger-2 { transform: rotate(-20deg) translateY(6px); }
.paw-container.curling .finger-3 { transform: rotate(-15deg) translateY(8px); }
.paw-container.curling .finger-4 { transform: rotate(-35deg) translateY(10px); }

.paw-container.curling {
  animation: pawCurl 1.5s ease-in-out infinite;
}

@keyframes pawCurl {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Glow Button */
.glow-button {
  border: 2px solid var(--gold);
  border-radius: 8px;
  box-shadow: 
    0 0 10px rgba(255, 215, 0, 0.3),
    inset 0 0 10px rgba(255, 215, 0, 0.1);
  transition: all 0.3s ease;
}

.glow-button:not(:disabled):hover {
  box-shadow: 
    0 0 20px rgba(255, 215, 0, 0.5),
    0 0 40px rgba(255, 215, 0, 0.3),
    inset 0 0 20px rgba(255, 215, 0, 0.2);
}

.glow-button:not(:disabled):active {
  transform: scale(0.98);
}

/* Personality Cards */
.personality-card {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.personality-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}

/* Mystical Input */
.mystical-input,
.mystical-textarea {
  box-shadow: 
    inset 0 0 10px rgba(107, 76, 154, 0.2),
    0 0 5px rgba(107, 76, 154, 0.1);
}

.mystical-input:focus,
.mystical-textarea:focus {
  box-shadow: 
    inset 0 0 15px rgba(255, 215, 0, 0.1),
    0 0 15px rgba(255, 215, 0, 0.3);
}

/* Wish Cards */
.wish-card {
  border: 2px solid;
  backdrop-filter: blur(10px);
  background: rgba(26, 10, 46, 0.8);
}

.wish-card.wish-gold {
  border-color: var(--gold);
  box-shadow: 
    0 0 20px rgba(255, 215, 0, 0.2),
    inset 0 0 30px rgba(255, 215, 0, 0.05);
}

.wish-card.wish-gold .card-header {
  color: var(--gold);
}

.wish-card.consequence-red {
  border-color: var(--red-ominous);
  box-shadow: 
    0 0 20px rgba(220, 20, 60, 0.2),
    inset 0 0 30px rgba(220, 20, 60, 0.05);
}

.wish-card.consequence-red .card-header {
  color: var(--red-ominous);
}

.wish-card.animate-card {
  animation: cardReveal 0.6s ease-out;
}

@keyframes cardReveal {
  from {
    opacity: 0;
    transform: scale(0.9) rotateX(-10deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotateX(0);
  }
}

/* Typing Cursor */
.typing-cursor::after {
  content: '▌';
  animation: blink 0.8s infinite;
  color: var(--green-eerie);
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Loading Screen */
.loading-screen {
  backdrop-filter: blur(10px);
}

.loading-mist {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.8) 100%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.1;
  animation: mistMove 10s ease-in-out infinite;
}

@keyframes mistMove {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.1) rotate(5deg); }
}

/* Screen Shake */
.screen-shake {
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Reaction Buttons */
.reaction-btn {
  border: 1px solid var(--purple-mid);
  transition: all 0.2s ease;
}

.reaction-btn:hover {
  transform: scale(1.1);
  border-color: var(--gold);
}

/* AI Quip */
.ai-quip {
  position: relative;
}

.ai-quip::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  border: 8px solid transparent;
  border-right-color: var(--purple-mid);
}

/* Stat Cards */
.stat-card {
  transition: transform 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-3px);
}

/* Timeline Cards */
.timeline-card {
  transition: all 0.2s ease;
}

.timeline-card:hover {
  background: rgba(107, 76, 154, 0.2);
}

/* Wish Count Button */
.wish-count-btn {
  min-width: 80px;
  transition: all 0.2s ease;
}

.wish-count-btn:hover {
  transform: translateY(-2px);
}

/* Custom Colors for Tailwind */
.text-gold { color: var(--gold); }
.border-gold { border-color: var(--gold); }
.bg-gold { background-color: var(--gold); }
.shadow-gold\/20 { box-shadow: 0 0 20px rgba(255, 215, 0, 0.2); }
.ring-gold { --tw-ring-color: var(--gold); }

/* Backstory Panel */
.backstory-panel {
  animation: panelFade 2s ease-out;
}

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

/* Responsive Adjustments */
@media (max-width: 768px) {
  .title-glow {
    font-size: 2rem;
  }
  
  .personality-card {
    padding: 0.75rem;
  }
  
  .personality-card h3 {
    font-size: 0.9rem;
  }
  
  .personality-card p {
    font-size: 0.75rem;
  }
  
  .glow-button {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
  }
  
  .wish-card {
    padding: 1rem;
  }
  
  .reaction-btn {
    padding: 0.75rem;
    font-size: 1.5rem;
  }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-dark);
}

::-webkit-scrollbar-thumb {
  background: var(--purple-mid);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gold-dark);
}

/* Selection */
::selection {
  background: var(--purple-mid);
  color: var(--gold);
}