@import "tailwindcss";

@theme {
  --color-anubis-beige: #faf8f4;
  --color-anubis-gold: #b8945f;
  --color-anubis-dark: #2d2323;
  --color-anubis-obsidian: #1a1616;
  --color-anubis-red: #dc2626;
  --color-anubis-orange: #ea580c;
  --color-anubis-brown: #78350f;
  --color-anubis-dark-brown: #451a03;
  --color-magical-purple: #6b4c93;
  --color-magical-blue: #4a5568;
  --color-magical-gold: #d4af37;
  --font-serif: "Playfair Display", serif;
  --font-sans: "Inter", sans-serif;
}

body {
  background: linear-gradient(135deg, #1a1616 0%, #2d2323 50%, #451a03 100%);
  background-attachment: fixed;
  color: #ffffff;
  min-height: 100vh;
}

/* Dark background with texture */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('/data/anubs_wallpaper.jpg') no-repeat center center;
  background-size: cover;
  opacity: 0.15;
  z-index: -1;
  pointer-events: none;
}

/* Magical card styling - Dark theme */
.magical-card {
  background: linear-gradient(135deg, rgba(45, 35, 35, 0.95) 0%, rgba(26, 22, 22, 0.98) 100%);
  border: 1px solid rgba(220, 38, 38, 0.3);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2),
              0 0 0 1px rgba(220, 38, 38, 0.1),
              inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
  color: #ffffff;
}

/* 3D Activity Box Styling - Dark theme - Enhanced 3D effect */
.activity-box-3d {
  position: relative;
  transform-style: preserve-3d;
  perspective: 1000px;
  background: linear-gradient(135deg, rgba(15, 12, 12, 0.98) 0%, rgba(8, 6, 6, 0.95) 100%);
  border: 2px solid rgba(220, 38, 38, 0.5);
  border-top-color: rgba(220, 38, 38, 0.4);
  border-left-color: rgba(220, 38, 38, 0.4);
  border-right-color: rgba(185, 28, 28, 0.6);
  border-bottom-color: rgba(185, 28, 28, 0.6);
  box-shadow: 
    /* Outer shadows for depth */
    0 8px 16px -4px rgba(0, 0, 0, 0.9),
    0 4px 8px -2px rgba(0, 0, 0, 0.7),
    0 2px 4px -1px rgba(0, 0, 0, 0.5),
    /* Red border glow */
    0 0 0 1px rgba(220, 38, 38, 0.3),
    0 0 16px rgba(220, 38, 38, 0.15),
    /* Inset highlights for 3D effect */
    inset 0 2px 4px 0 rgba(255, 255, 255, 0.08),
    inset 0 -2px 4px 0 rgba(0, 0, 0, 0.7),
    /* Top-left highlight */
    inset -1px -1px 2px 0 rgba(220, 38, 38, 0.2),
    /* Bottom-right shadow */
    inset 1px 1px 2px 0 rgba(0, 0, 0, 0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: #ffffff;
  transform: rotateX(2deg) rotateY(-1deg);
  overflow: visible;
  will-change: transform;
}

.activity-box-3d:hover {
  transform: translateY(-6px) translateZ(10px) rotateX(4deg) rotateY(-2deg);
  border: 2px solid rgba(220, 38, 38, 0.5);
  border-top-color: rgba(248, 113, 113, 0.4);
  border-left-color: rgba(248, 113, 113, 0.4);
  border-right-color: rgba(185, 28, 28, 0.6);
  border-bottom-color: rgba(185, 28, 28, 0.6);
  box-shadow: 
    /* Enhanced outer shadows */
    0 20px 40px -8px rgba(0, 0, 0, 0.8),
    0 12px 24px -6px rgba(0, 0, 0, 0.7),
    0 6px 12px -3px rgba(0, 0, 0, 0.6),
    /* Stronger red border glow */
    0 0 0 1px rgba(220, 38, 38, 0.4),
    0 0 20px rgba(220, 38, 38, 0.25),
    0 0 30px rgba(220, 38, 38, 0.15),
    /* Enhanced inset highlights */
    inset 0 3px 6px 0 rgba(255, 255, 255, 0.1),
    inset 0 -3px 6px 0 rgba(0, 0, 0, 0.7),
    /* Stronger top-left highlight */
    inset -2px -2px 3px 0 rgba(248, 113, 113, 0.2),
    /* Stronger bottom-right shadow */
    inset 2px 2px 3px 0 rgba(0, 0, 0, 0.8);
}

.activity-box-3d.completed {
  border: 2px solid rgba(220, 38, 38, 0.9);
  border-top-color: rgba(248, 113, 113, 0.7);
  border-left-color: rgba(248, 113, 113, 0.7);
  border-right-color: rgba(185, 28, 28, 1);
  border-bottom-color: rgba(185, 28, 28, 1);
  box-shadow: 
    /* Red border glow */
    0 0 0 1px rgba(220, 38, 38, 0.6),
    /* Enhanced red glow */
    0 0 20px rgba(220, 38, 38, 0.3),
    0 0 30px rgba(220, 38, 38, 0.2),
    /* Inset highlights */
    inset 0 2px 4px 0 rgba(255, 255, 255, 0.12),
    inset 0 -2px 4px 0 rgba(0, 0, 0, 0.6),
    /* Top-left red highlight */
    inset -1px -1px 2px 0 rgba(248, 113, 113, 0.3),
    /* Bottom-right shadow */
    inset 1px 1px 2px 0 rgba(0, 0, 0, 0.7);
  background: linear-gradient(135deg, rgba(20, 15, 15, 0.98) 0%, rgba(12, 8, 8, 0.95) 100%);
  transform: rotateX(2deg) rotateY(-1deg);
}

.activity-box-3d.completed:hover {
  transform: translateY(-4px) translateZ(8px) rotateX(4deg) rotateY(-2deg);
  border-width: 2px;
  border-style: solid;
  border-top-color: rgba(248, 113, 113, 0.9);
  border-left-color: rgba(248, 113, 113, 0.9);
  border-right-color: rgba(185, 28, 28, 1);
  border-bottom-color: rgba(185, 28, 28, 1);
  box-shadow: 
    /* Enhanced shadows with red tint */
    0 16px 32px -8px rgba(220, 38, 38, 0.2),
    0 8px 16px -4px rgba(0, 0, 0, 0.6),
    0 4px 8px -2px rgba(0, 0, 0, 0.5),
    /* Stronger red glow */
    0 0 0 1px rgba(220, 38, 38, 0.6),
    0 0 12px rgba(220, 38, 38, 0.25),
    /* Enhanced inset highlights */
    inset 0 3px 6px 0 rgba(255, 255, 255, 0.12),
    inset 0 -3px 6px 0 rgba(0, 0, 0, 0.5),
    /* Stronger red highlight */
    inset -2px -2px 3px 0 rgba(248, 113, 113, 0.3),
    /* Stronger shadow */
    inset 2px 2px 3px 0 rgba(0, 0, 0, 0.6);
}

/* Next activity highlight - Orange/Gold border */
.activity-box-3d.next-activity {
  border: 2px solid rgba(251, 146, 60, 1);
  border-top-color: rgba(251, 191, 36, 0.9);
  border-left-color: rgba(251, 191, 36, 0.9);
  border-right-color: rgba(234, 88, 12, 1);
  border-bottom-color: rgba(234, 88, 12, 1);
  box-shadow: 
    
  
    /* Orange border glow */
    0 0 0 1px rgba(251, 146, 60, 0.8),
    /* Enhanced orange glow effect */
    /* Inset highlights */
    inset 0 2px 4px 0 rgba(255, 255, 255, 0.15),
    inset 0 -2px 4px 0 rgba(0, 0, 0, 0.6),
    /* Top-left orange highlight */
    inset -1px -1px 2px 0 rgba(251, 191, 36, 0.45),
    /* Bottom-right shadow */
    inset 1px 1px 2px 0 rgba(0, 0, 0, 0.7);
  background: linear-gradient(135deg, rgba(30, 20, 15, 0.98) 0%, rgba(20, 12, 8, 0.95) 100%);
  transform: rotateX(2deg) rotateY(-1deg);
}

.activity-box-3d.next-activity:hover {
  transform: translateY(-4px) translateZ(8px) rotateX(4deg) rotateY(-2deg);
  border: 2px solid rgba(212, 175, 55, 0.9);
  border-top-color: rgba(250, 204, 21, 0.8);
  border-left-color: rgba(250, 204, 21, 0.8);
  border-right-color: rgba(180, 83, 9, 1);
  border-bottom-color: rgba(180, 83, 9, 1);
  box-shadow: 
    /* Enhanced shadows with gold tint */
    0 16px 32px -8px rgba(250, 204, 21, 0.25),
    0 8px 16px -4px rgba(0, 0, 0, 0.6),
    0 4px 8px -2px rgba(0, 0, 0, 0.5),
    /* Stronger gold glow */
    0 0 0 1px rgba(212, 175, 55, 0.7),
    0 0 16px rgba(250, 204, 21, 0.4),
    0 0 24px rgba(212, 175, 55, 0.2),
    /* Enhanced inset highlights */
    inset 0 3px 6px 0 rgba(255, 255, 255, 0.15),
    inset 0 -3px 6px 0 rgba(0, 0, 0, 0.5),
    /* Stronger gold highlight */
    inset -2px -2px 3px 0 rgba(250, 204, 21, 0.4),
    /* Stronger shadow */
    inset 2px 2px 3px 0 rgba(0, 0, 0, 0.6);
}

@keyframes gold-pulse {
  0%, 100% {
    box-shadow: 
      0 12px 24px -4px rgba(0, 0, 0, 0.8),
      0 6px 12px -2px rgba(0, 0, 0, 0.7),
      0 3px 6px -1px rgba(0, 0, 0, 0.6),
      0 0 0 1px rgba(251, 146, 60, 0.8),
      0 0 20px rgba(251, 146, 60, 0.5),
      0 0 30px rgba(251, 146, 60, 0.35),
      0 0 40px rgba(234, 88, 12, 0.2),
      inset 0 2px 4px 0 rgba(255, 255, 255, 0.15),
      inset 0 -2px 4px 0 rgba(0, 0, 0, 0.6),
      inset -1px -1px 2px 0 rgba(251, 191, 36, 0.45),
      inset 1px 1px 2px 0 rgba(0, 0, 0, 0.7);
  }
  50% {
    box-shadow: 
      0 14px 28px -4px rgba(0, 0, 0, 0.9),
      0 7px 14px -2px rgba(0, 0, 0, 0.8),
      0 4px 8px -1px rgba(0, 0, 0, 0.7),
      0 0 0 1px rgba(251, 146, 60, 1),
      0 0 24px rgba(251, 146, 60, 0.6),
      0 0 36px rgba(251, 146, 60, 0.45),
      0 0 48px rgba(234, 88, 12, 0.3),
      inset 0 2px 4px 0 rgba(255, 255, 255, 0.18),
      inset 0 -2px 4px 0 rgba(0, 0, 0, 0.7),
      inset -1px -1px 2px 0 rgba(251, 191, 36, 0.55),
      inset 1px 1px 2px 0 rgba(0, 0, 0, 0.8);
  }
}

.magical-card-hover {
  transition: all 0.3s ease;
}

.magical-card-hover:hover {
  box-shadow: 0 10px 15px -3px rgba(107, 76, 147, 0.1), 0 4px 6px -2px rgba(107, 76, 147, 0.05),
              0 0 0 1px rgba(184, 148, 95, 0.2),
              inset 0 1px 0 0 rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
}

/* Magical border glow */
.magical-border {
  border: 1px solid rgba(184, 148, 95, 0.3);
  box-shadow: 0 0 0 1px rgba(184, 148, 95, 0.1),
              inset 0 1px 2px rgba(255, 255, 255, 0.5);
}

.magical-border-completed {
  border: 1.5px solid rgba(34, 197, 94, 0.4);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.15),
              0 0 8px rgba(34, 197, 94, 0.1),
              inset 0 1px 2px rgba(255, 255, 255, 0.5);
}

/* Magical text gradient - Dark theme */
.magical-text {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Magical heading - Dark theme */
.magical-heading {
  font-family: var(--font-serif);
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 8px rgba(220, 38, 38, 0.3);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.temple-light-bg {
  background: url('/data/anubs_wallpaper.jpg') no-repeat center center;
  background-size: cover;
}

.glass-card-light {
  background: rgba(45, 35, 35, 0.95);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(220, 38, 38, 0.3);
  color: #ffffff;
}

/* Basic Markdown Styles */
.prose-anubis p { 
    margin-bottom: 1rem;
    line-height: 1.75;
}
.prose-anubis h1, .prose.prose-anubis h1, .prose-lg.prose-anubis h1 { 
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 1.875rem;
    color: #ffffff;
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(220, 38, 38, 0.4);
}
.prose-anubis h2, .prose.prose-anubis h2, .prose-lg.prose-anubis h2 { 
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 1.5rem;
    color: #ffffff;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid rgba(220, 38, 38, 0.3);
}
.prose-anubis h3, .prose.prose-anubis h3, .prose-lg.prose-anubis h3 { 
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 1.25rem;
    color: #ffffff;
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
}
.prose-anubis h4, .prose.prose-anubis h4, .prose-lg.prose-anubis h4 { 
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 1.125rem;
    color: #ffffff;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}
.prose-anubis h5, .prose.prose-anubis h5, .prose-lg.prose-anubis h5 { 
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 1rem;
    color: #ffffff;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}
.prose-anubis h6, .prose.prose-anubis h6, .prose-lg.prose-anubis h6 { 
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 0.875rem;
    color: #ffffff;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
}
.prose-anubis p { 
    color: #ffffff; 
    margin-bottom: 1rem;
    line-height: 1.75;
}
.prose-anubis strong { @apply font-bold; color: #ffffff; }
.prose-anubis em { @apply italic; color: #ffffff; }
.prose-anubis code { @apply bg-gray-800 px-1.5 py-0.5 rounded text-sm font-mono text-red-300; }
.prose-anubis a { 
    color: #dc2626; 
    @apply underline font-bold; 
    text-decoration: underline;
    text-decoration-color: #dc2626;
    text-underline-offset: 2px;
}
.prose-anubis a:hover {
    text-decoration-color: #ef4444;
    opacity: 0.9;
}
.prose-anubis blockquote { 
    @apply border-l-4 border-red-600/50 pl-4 py-2 my-4 italic text-gray-300 bg-black/20 rounded-r;
}
.prose-anubis ul, .prose-anubis ol {
    @apply mb-4;
    margin-left: 0;
    padding-left: 1.25rem;
    list-style-position: outside;
}
.prose-anubis ul {
    list-style-type: disc;
}
.prose-anubis ol {
    list-style-type: decimal;
}
.prose-anubis li {
    @apply mb-1.5;
    line-height: 1.7;
    padding-left: 0.25rem;
}
.prose-anubis li > p {
    margin-bottom: 0.25rem;
}
.prose-anubis hr {
    @apply my-6 border-red-600/30;
}
.prose-anubis table {
    @apply w-full border-collapse mb-4;
}
.prose-anubis th, .prose-anubis td {
    @apply border border-red-600/30 px-4 py-2;
}
.prose-anubis th {
    @apply bg-red-600/10 font-bold;
}
.prose-anubis pre {
    @apply bg-gray-900 p-4 rounded-lg overflow-x-auto mb-4 border border-red-600/20;
}
.prose-anubis pre code {
    @apply bg-transparent p-0 text-sm;
}

/* Smaller markdown for comments */
.prose-anubis.prose-sm p { @apply mb-2 leading-relaxed text-sm; }
.prose-anubis.prose-sm h1, .prose-anubis.prose-sm h2, .prose-anubis.prose-sm h3 { @apply text-base mt-3 mb-2; }
.prose-anubis.prose-sm ul, .prose-anubis.prose-sm ol { @apply mb-2 text-sm; }
.prose-anubis.prose-sm code { @apply text-xs px-1 py-0.5; }

/* Mobile optimizations */
@media (max-width: 640px) {
  /* Improve touch targets */
  button, a {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Prevent text size adjustment on iOS */
  input, textarea, select {
    font-size: 16px !important;
  }
  
  /* Better scrolling on mobile */
  * {
    -webkit-overflow-scrolling: touch;
  }
  
  /* Better spacing for mobile */
  .dark-card {
    padding: 1rem;
  }
  
  /* Improve readability */
  body {
    font-size: 16px;
    line-height: 1.6;
  }
  
  /* Better table scrolling on mobile */
  .custom-scrollbar {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  
  /* Improve activity boxes on mobile */
  .activity-box-3d {
    min-height: 80px;
  }
  
  /* Better prose readability on mobile */
  .prose-anubis {
    font-size: 16px;
    line-height: 1.7;
  }
  
  .prose-anubis p {
    margin-bottom: 1rem;
    line-height: 1.7;
  }
  
  .prose-anubis h1, .prose.prose-anubis h1, .prose-lg.prose-anubis h1 {
    font-size: 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
  }
  
  .prose-anubis h2, .prose.prose-anubis h2, .prose-lg.prose-anubis h2 {
    font-size: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 0.625rem;
  }
  
  .prose-anubis h3, .prose.prose-anubis h3, .prose-lg.prose-anubis h3 {
    font-size: 1.125rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
  }
  
  .prose-anubis ul, .prose-anubis ol {
    padding-left: 1rem;
  }
  
  .prose-anubis img {
    max-width: 100%;
    height: auto;
  }
  
  /* Task display improvements */
  .task-display {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  /* Better comment display on mobile */
  .comment-item {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

/* Prevent horizontal scroll on mobile */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Dark theme common classes */
.dark-card {
  background: linear-gradient(135deg, rgba(45, 35, 35, 0.95) 0%, rgba(26, 22, 22, 0.98) 100%);
  border: 1px solid rgba(220, 38, 38, 0.3);
  color: #ffffff;
}

.dark-text {
  color: #ffffff;
}

.dark-text-secondary {
  color: #d1d5db; /* gray-300 */
}

.dark-text-muted {
  color: #9ca3af; /* gray-400 */
}

.dark-border {
  border-color: rgba(220, 38, 38, 0.3);
}

/* Animations */
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

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

.animate-shimmer {
  animation: shimmer 2s infinite;
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out;
}

/* Custom scrollbar for leaderboard table */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(26, 22, 22, 0.5);
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(220, 38, 38, 0.4);
  border-radius: 4px;
  transition: background 0.2s;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(220, 38, 38, 0.6);
}

/* Firefox scrollbar */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(220, 38, 38, 0.4) rgba(26, 22, 22, 0.5);
}

/* Table row hover effects */
.user-row:hover td {
  background-color: transparent;
}

.user-row:hover {
  transform: translateX(2px);
  box-shadow: inset 4px 0 0 rgba(220, 38, 38, 0.3);
  border-bottom: none !important;
}