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

/* Custom tier colors */
@layer utilities {
  .tier-5 { @apply bg-emerald-500; }
  .tier-4 { @apply bg-lime-500; }
  .tier-3 { @apply bg-yellow-500; }
  .tier-2 { @apply bg-orange-400; }
  .tier-1 { @apply bg-red-500; }
  .tier-0 { @apply bg-slate-600; }
  
  .tier-5-text { @apply text-emerald-400; }
  .tier-4-text { @apply text-lime-400; }
  .tier-3-text { @apply text-yellow-400; }
  .tier-2-text { @apply text-orange-400; }
  .tier-1-text { @apply text-red-400; }
  .tier-0-text { @apply text-slate-400; }
}

/* Matrix cell animations */
@layer components {
  .matrix-cell {
    @apply transition-all duration-100 cursor-pointer;
  }
  
  .matrix-cell:hover {
    @apply scale-150 z-10 ring-2 ring-white/50;
  }
  
  .matrix-cell.selected {
    @apply ring-2 ring-cyan-400;
  }
}

/* Slide-in panel */
@layer components {
  .detail-panel {
    @apply fixed right-0 top-0 h-full bg-slate-900 border-l border-slate-700;
    @apply shadow-2xl overflow-y-auto transform transition-transform duration-300;
    width: 100%;
    max-width: 450px;
  }
  
  .detail-panel.hidden {
    @apply translate-x-full;
  }
  
  .detail-panel.visible {
    @apply translate-x-0;
  }
}

/* Mobile-specific adjustments */
@media (max-width: 480px) {
  .detail-panel {
    max-width: 100%;
    border-left: none;
  }
  
  /* Hide keyboard hints on mobile - not useful on touch devices */
  .keyboard-hint {
    display: none !important;
  }
  
  /* More compact state header on mobile */
  .detail-panel .text-2xl {
    font-size: 1.25rem;
  }
  
  /* Compact header on mobile */
  .mobile-title {
    font-size: 1.125rem !important;
  }
  
  /* Smaller stat values on mobile */
  .stat-value {
    font-size: 1.5rem !important;
  }
  
  /* Better matrix controls on mobile */
  .matrix-controls {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .matrix-controls .sort-buttons {
    flex-wrap: wrap;
  }
  
  /* Single column for about links on very small screens */
  .about-links {
    grid-template-columns: 1fr !important;
  }
  
}

/* Hide non-essential elements on mobile/tablet */
@media (max-width: 640px) {
  .hidden-mobile {
    display: none !important;
  }
}

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

::-webkit-scrollbar-track {
  @apply bg-slate-900;
}

::-webkit-scrollbar-thumb {
  @apply bg-slate-700 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-slate-600;
}

/* Typography */
body {
  font-family: 'Space Grotesk', system-ui, sans-serif;
}

.font-mono {
  font-family: 'JetBrains Mono', monospace;
}