deckhearth/styles/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom styles */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Theme Variables - Deck Hearth Fire-Inspired */
:root {
  /* Light Theme - Warm Daylight by the Hearth */
  --bg-primary-light: #fefcf8;        /* Warm cream, like sunlit stone */
  --bg-secondary-light: #f7f3ed;      /* Soft beige, like aged parchment */
  --bg-tertiary-light: #f0e6d6;       /* Light wood tone */
  --text-primary-light: #2d1810;      /* Dark chocolate brown */
  --text-secondary-light: #5d4037;    /* Medium brown, like burnt wood */
  --text-accent-light: #d84315;       /* Ember orange */
  --border-light: #e8dcc6;            /* Light wood border */
  --shadow-light: 0 4px 6px -1px rgba(45, 24, 16, 0.1);
  --gradient-primary-light: linear-gradient(135deg, #ff6f00 0%, #d84315 100%);    /* Fire gradient */
  --gradient-secondary-light: linear-gradient(135deg, #ffab40 0%, #ff6f00 100%); /* Golden flame */
  --accent-flame-light: #ff6f00;      /* Bright flame orange */
  --accent-ember-light: #d84315;      /* Deep ember red */
  --accent-gold-light: #ffab40;       /* Golden flame */
  --accent-wood-light: #8d6e63;       /* Rich wood tone */
  --input-bg-light: #fefcf8;
  --input-border-light: #e8dcc6;
  --input-text-light: #2d1810;
  --input-placeholder-light: #5d4037;
}

[data-theme="dark"] {
  /* Dark Theme - Cozy Evening by the Fire */
  --bg-primary-dark: #1a0f0a;         /* Deep charcoal, like burnt wood */
  --bg-secondary-dark: #2d1b12;       /* Rich dark brown, like oak */
  --bg-tertiary-dark: #3d2317;        /* Medium brown, like mahogany */
  --text-primary-dark: #fff8f0;       /* Warm white, like firelight */
  --text-secondary-dark: #d7c4b0;     /* Soft cream, like candlelight */
  --text-accent-dark: #ff8a50;        /* Bright flame orange */
  --border-dark: #4a2f1f;             /* Dark wood border */
  --shadow-dark: 0 4px 6px -1px rgba(26, 15, 10, 0.4);
  --gradient-primary-dark: linear-gradient(135deg, #ff8a50 0%, #d84315 100%);    /* Evening fire */
  --gradient-secondary-dark: linear-gradient(135deg, #ffab40 0%, #ff6f00 100%); /* Golden embers */
  --accent-flame-dark: #ff8a50;       /* Bright flame */
  --accent-ember-dark: #d84315;       /* Glowing ember */
  --accent-gold-dark: #ffab40;        /* Golden glow */
  --accent-wood-dark: #8d6e63;        /* Warm wood */
  --input-bg-dark: #2d1b12;
  --input-border-dark: #4a2f1f;
  --input-text-dark: #fff8f0;
  --input-placeholder-dark: #d7c4b0;
  --search-bg-dark: #2d1b12;
  --search-border-dark: #4a2f1f;
  --search-text-dark: #fff8f0;
  --search-placeholder-dark: #d7c4b0;
}

/* Apply theme colors */
body {
  background-color: var(--bg-primary-light);
  color: var(--text-primary-light);
}

[data-theme="dark"] body {
  background-color: var(--bg-primary-dark);
  color: var(--text-primary-dark);
}

/* Default theme variables for light theme */
:root {
  --bg-primary: var(--bg-primary-light);
  --bg-secondary: var(--bg-secondary-light);
  --bg-tertiary: var(--bg-tertiary-light);
  --text-primary: var(--text-primary-light);
  --text-secondary: var(--text-secondary-light);
  --text-accent: var(--text-accent-light);
  --border: var(--border-light);
  --shadow: var(--shadow-light);
  --gradient-primary: var(--gradient-primary-light);
  --gradient-secondary: var(--gradient-secondary-light);
  --accent-flame: var(--accent-flame-light);
  --accent-ember: var(--accent-ember-light);
  --accent-gold: var(--accent-gold-light);
  --accent-wood: var(--accent-wood-light);
  /* Legacy color mappings for compatibility */
  --accent-blue: var(--accent-flame-light);
  --accent-purple: var(--accent-ember-light);
  --accent-pink: var(--accent-gold-light);
  --input-bg: var(--input-bg-light);
  --input-border: var(--input-border-light);
  --input-text: var(--input-text-light);
  --input-placeholder: var(--input-placeholder-light);
}

/* Dark theme variables */
[data-theme="dark"] {
  --bg-primary: var(--bg-primary-dark);
  --bg-secondary: var(--bg-secondary-dark);
  --bg-tertiary: var(--bg-tertiary-dark);
  --text-primary: var(--text-primary-dark);
  --text-secondary: var(--text-secondary-dark);
  --text-accent: var(--text-accent-dark);
  --border: var(--border-dark);
  --shadow: var(--shadow-dark);
  --gradient-primary: var(--gradient-primary-dark);
  --gradient-secondary: var(--gradient-secondary-dark);
  --accent-flame: var(--accent-flame-dark);
  --accent-ember: var(--accent-ember-dark);
  --accent-gold: var(--accent-gold-dark);
  --accent-wood: var(--accent-wood-dark);
  /* Legacy color mappings for compatibility */
  --accent-blue: var(--accent-flame-dark);
  --accent-purple: var(--accent-ember-dark);
  --accent-pink: var(--accent-gold-dark);
  --input-bg: var(--input-bg-dark);
  --input-border: var(--input-border-dark);
  --input-text: var(--input-text-dark);
  --input-placeholder: var(--input-placeholder-dark);
}

/* Custom component styles - Fire-themed */
.btn-primary {
  @apply font-bold py-3 px-6 rounded-2xl transition-all duration-300 shadow-lg hover:shadow-xl;
  background: var(--gradient-primary);
  color: white;
}

.btn-flame {
  @apply font-bold py-2 px-4 rounded-lg transition-all duration-300 shadow-md hover:shadow-lg;
  background-color: var(--accent-flame);
  color: white;
}

.btn-flame:hover {
  background-color: var(--accent-ember);
  transform: translateY(-1px);
}

.btn-ember {
  @apply font-bold py-2 px-4 rounded-lg transition-all duration-300 shadow-md hover:shadow-lg;
  background-color: var(--accent-ember);
  color: white;
}

.btn-ember:hover {
  background: var(--gradient-primary);
  transform: translateY(-1px);
}

.btn-gold {
  @apply font-bold py-2 px-4 rounded-lg transition-all duration-300 shadow-md hover:shadow-lg;
  background-color: var(--accent-gold);
  color: white;
}

.btn-gold:hover {
  background: var(--gradient-secondary);
  transform: translateY(-1px);
}

.gradient-bg-fire {
  background: var(--gradient-primary);
}

.gradient-bg-golden {
  background: var(--gradient-secondary);
}

/* Fire glow effects */
.fire-glow {
  box-shadow: 0 0 20px rgba(255, 111, 0, 0.3);
}

.ember-glow {
  box-shadow: 0 0 15px rgba(216, 67, 21, 0.4);
}

.btn-secondary {
  @apply font-bold py-3 px-6 rounded-2xl transition-all duration-300 shadow-lg hover:shadow-xl;
  background: var(--gradient-secondary);
  color: white;
}

.input-field {
  @apply w-full px-4 py-3 border rounded-2xl shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-0 transition-all duration-200;
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--input-text);
}

.input-field::placeholder {
  color: var(--input-placeholder);
}

.card {
  @apply rounded-3xl shadow-lg p-6 transition-all duration-300;
  background-color: var(--bg-primary);
  border: 1px solid var(--border);
}

/* Glowing effects for dark theme */
[data-theme="dark"] .glow-blue {
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
}

[data-theme="dark"] .glow-purple {
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
}

[data-theme="dark"] .glow-pink {
  box-shadow: 0 0 20px rgba(236, 72, 153, 0.3);
}

/* Gradient text effects */
.gradient-text-blue {
  background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-purple {
  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Theme toggle button */
.theme-toggle {
  @apply p-2 rounded-2xl transition-all duration-300;
  background: var(--bg-secondary);
  color: var(--text-primary);
}

/* Header icons */
.header-icon {
  @apply p-2 rounded-xl transition-all duration-200;
  color: var(--text-secondary);
}

/* Logo styling */
.logo-container {
  @apply rounded-2xl flex items-center justify-center transition-all duration-300;
  background: var(--gradient-primary);
}

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

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

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

::-webkit-scrollbar-thumb:hover {
  background: var(--text-accent);
} 

/* Search bar specific styling */
.search-bar {
  @apply w-full px-4 py-3 border rounded-2xl shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-0 transition-all duration-200;
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--input-text);
}

.search-bar::placeholder {
  color: var(--input-placeholder);
}

/* Action buttons with proper gradients */
.action-btn-primary {
  @apply font-bold py-3 px-6 rounded-2xl transition-all duration-300 shadow-lg hover:shadow-xl;
  background: var(--gradient-primary);
  color: white;
}

.action-btn-secondary {
  @apply font-bold py-3 px-6 rounded-2xl transition-all duration-300 shadow-lg hover:shadow-xl;
  background: var(--gradient-secondary);
  color: white;
}

/* Particle Effects for High Rarity Cards */
@keyframes float {
  0%, 100% {
    transform: translateY(0px) translateX(0px);
    opacity: 0.7;
  }
  25% {
    transform: translateY(-8px) translateX(4px);
    opacity: 1;
  }
  50% {
    transform: translateY(-4px) translateX(-2px);
    opacity: 0.8;
  }
  75% {
    transform: translateY(-12px) translateX(6px);
    opacity: 0.9;
  }
}

@keyframes sparkle {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.8;
  }
  25% {
    transform: scale(1.5) rotate(90deg);
    opacity: 1;
  }
  50% {
    transform: scale(0.8) rotate(180deg);
    opacity: 0.6;
  }
  75% {
    transform: scale(1.2) rotate(270deg);
    opacity: 0.9;
  }
}

@keyframes aura {
  0%, 100% {
    opacity: 0.1;
    transform: scale(1);
  }
  50% {
    opacity: 0.2;
    transform: scale(1.05);
  }
}

@keyframes edgeFloat {
  0%, 100% {
    opacity: 0.7;
    transform: translateY(0px) translateX(0px);
  }
  25% {
    opacity: 1;
    transform: translateY(-3px) translateX(2px);
  }
  50% {
    opacity: 0.8;
    transform: translateY(-1px) translateX(-1px);
  }
  75% {
    opacity: 0.9;
    transform: translateY(-4px) translateX(3px);
  }
}

@keyframes edgeGlow {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  25% {
    opacity: 0.8;
    transform: scale(1.2);
  }
  50% {
    opacity: 0.6;
    transform: scale(0.8);
  }
  75% {
    opacity: 0.9;
    transform: scale(1.1);
  }
}

/* Enhanced glow effects for mythic and enchanted cards */
.card-mythic-glow {
  box-shadow: 
    0 0 20px rgba(255, 215, 0, 0.4),
    0 0 40px rgba(255, 215, 0, 0.2),
    0 0 60px rgba(255, 215, 0, 0.1);
}

.card-enchanted-glow {
  box-shadow: 
    0 0 20px rgba(168, 85, 247, 0.4),
    0 0 40px rgba(168, 85, 247, 0.2),
    0 0 60px rgba(168, 85, 247, 0.1);
} 

/* Card Hover Panel Styles */
.card-item-container {
  position: relative;
}

.card-item-container:hover {
  z-index: 50;
}

.card-item-container.selected {
  z-index: 60;
}

/* Ensure proper layering during animations */
.card-grid-container {
  position: relative;
  z-index: 1;
}

/* Prevent text selection during card interactions */
.card-item-container * {
  user-select: none;
}

/* Side panel specific styles */
.card-side-panel {
  transform-origin: left center;
  backdrop-filter: blur(8px);
}

/* Responsive adjustments for side panels */
@media (max-width: 1280px) {
  .card-side-panel {
    width: 16rem; /* w-64 */
  }
}

@media (max-width: 1024px) {
  .card-side-panel {
    display: none; /* Hide panels on smaller screens */
  }
}

/* Dark mode improvements */
@media (prefers-color-scheme: dark) {
  .card-side-panel {
    backdrop-filter: blur(8px) brightness(0.8);
  }
}

/* Smooth panel transitions */
.card-panel-enter {
  opacity: 0;
  transform: translateX(8px);
}

.card-panel-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: all 300ms ease-out;
}

/* Rarity Effects */
/* Mythic/Legendary - Golden glow */
.rarity-glow-mythic {
  box-shadow: 
    0 0 20px rgba(251, 191, 36, 0.4),
    0 0 40px rgba(251, 191, 36, 0.3),
    0 0 60px rgba(251, 191, 36, 0.2);
  animation: mythic-pulse 3s ease-in-out infinite;
}

@keyframes mythic-pulse {
  0%, 100% { 
    box-shadow: 
      0 0 20px rgba(251, 191, 36, 0.4),
      0 0 40px rgba(251, 191, 36, 0.3),
      0 0 60px rgba(251, 191, 36, 0.2);
  }
  50% { 
    box-shadow: 
      0 0 30px rgba(251, 191, 36, 0.6),
      0 0 60px rgba(251, 191, 36, 0.4),
      0 0 90px rgba(251, 191, 36, 0.3);
  }
}

.rarity-particles-mythic::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 30%, rgba(251, 191, 36, 0.3) 0%, transparent 50%),
              radial-gradient(circle at 80% 70%, rgba(251, 191, 36, 0.2) 0%, transparent 50%),
              radial-gradient(circle at 60% 20%, rgba(251, 191, 36, 0.25) 0%, transparent 50%);
  animation: mythic-sparkle 4s ease-in-out infinite;
  border-radius: inherit;
}

@keyframes mythic-sparkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

/* Rare - Purple glow */
.rarity-glow-rare {
  box-shadow: 
    0 0 15px rgba(168, 85, 247, 0.4),
    0 0 30px rgba(168, 85, 247, 0.3),
    0 0 45px rgba(168, 85, 247, 0.2);
  animation: rare-pulse 2.5s ease-in-out infinite;
}

@keyframes rare-pulse {
  0%, 100% { 
    box-shadow: 
      0 0 15px rgba(168, 85, 247, 0.4),
      0 0 30px rgba(168, 85, 247, 0.3),
      0 0 45px rgba(168, 85, 247, 0.2);
  }
  50% { 
    box-shadow: 
      0 0 25px rgba(168, 85, 247, 0.5),
      0 0 50px rgba(168, 85, 247, 0.4),
      0 0 75px rgba(168, 85, 247, 0.3);
  }
}

.rarity-particles-rare::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 40%, rgba(168, 85, 247, 0.2) 0%, transparent 40%),
              radial-gradient(circle at 70% 60%, rgba(168, 85, 247, 0.15) 0%, transparent 40%);
  animation: rare-shimmer 3s ease-in-out infinite;
  border-radius: inherit;
}

@keyframes rare-shimmer {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.5; }
}

/* Uncommon - Blue glow */
.rarity-glow-uncommon {
  box-shadow: 
    0 0 10px rgba(96, 165, 250, 0.3),
    0 0 20px rgba(96, 165, 250, 0.2);
  animation: uncommon-pulse 2s ease-in-out infinite;
}

@keyframes uncommon-pulse {
  0%, 100% { 
    box-shadow: 
      0 0 10px rgba(96, 165, 250, 0.3),
      0 0 20px rgba(96, 165, 250, 0.2);
  }
  50% { 
    box-shadow: 
      0 0 15px rgba(96, 165, 250, 0.4),
      0 0 30px rgba(96, 165, 250, 0.3);
  }
}

.rarity-particles-uncommon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 40% 30%, rgba(96, 165, 250, 0.15) 0%, transparent 30%);
  animation: uncommon-twinkle 2.5s ease-in-out infinite;
  border-radius: inherit;
}

@keyframes uncommon-twinkle {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.3; }
}

/* Enchanted/Secret - Pink/Rainbow glow */
.rarity-glow-enchanted {
  box-shadow: 
    0 0 25px rgba(244, 114, 182, 0.5),
    0 0 50px rgba(244, 114, 182, 0.4),
    0 0 75px rgba(244, 114, 182, 0.3);
  animation: enchanted-pulse 2s ease-in-out infinite;
}

@keyframes enchanted-pulse {
  0%, 100% { 
    box-shadow: 
      0 0 25px rgba(244, 114, 182, 0.5),
      0 0 50px rgba(244, 114, 182, 0.4),
      0 0 75px rgba(244, 114, 182, 0.3);
  }
  33% { 
    box-shadow: 
      0 0 30px rgba(168, 85, 247, 0.5),
      0 0 60px rgba(168, 85, 247, 0.4),
      0 0 90px rgba(168, 85, 247, 0.3);
  }
  66% { 
    box-shadow: 
      0 0 30px rgba(59, 130, 246, 0.5),
      0 0 60px rgba(59, 130, 246, 0.4),
      0 0 90px rgba(59, 130, 246, 0.3);
  }
}

.rarity-particles-enchanted::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 25% 25%, rgba(244, 114, 182, 0.3) 0%, transparent 40%),
    radial-gradient(circle at 75% 75%, rgba(168, 85, 247, 0.2) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.25) 0%, transparent 40%);
  animation: enchanted-rainbow 3s ease-in-out infinite;
  border-radius: inherit;
}

@keyframes enchanted-rainbow {
  0%, 100% { 
    opacity: 0.4;
    transform: rotate(0deg);
  }
  33% { 
    opacity: 0.6;
    transform: rotate(120deg);
  }
  66% { 
    opacity: 0.5;
    transform: rotate(240deg);
  }
}

/* Hover enhancement for rarity effects */
.card-item-container:hover .rarity-glow-mythic {
  box-shadow: 
    0 0 30px rgba(251, 191, 36, 0.6),
    0 0 60px rgba(251, 191, 36, 0.5),
    0 0 90px rgba(251, 191, 36, 0.4);
}

.card-item-container:hover .rarity-glow-rare {
  box-shadow: 
    0 0 25px rgba(168, 85, 247, 0.6),
    0 0 50px rgba(168, 85, 247, 0.5),
    0 0 75px rgba(168, 85, 247, 0.4);
}

.card-item-container:hover .rarity-glow-uncommon {
  box-shadow: 
    0 0 20px rgba(96, 165, 250, 0.5),
    0 0 40px rgba(96, 165, 250, 0.4);
}

.card-item-container:hover .rarity-glow-enchanted {
  box-shadow: 
    0 0 35px rgba(244, 114, 182, 0.7),
    0 0 70px rgba(244, 114, 182, 0.6),
    0 0 105px rgba(244, 114, 182, 0.5);
}