/* ===== CORE DESIGN SYSTEM ===== */

/* General body styling */
body {
  font-family: 'Inter', 'Roboto', sans-serif;
  background-color: #0F1419;
  color: #888;
  margin: 0;
  padding: 0;
}

/* General HTML styles */
html {
  font-family: 'Inter', 'Roboto', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color: #888;
}

body.dark {
  background-color: #0F1419;
  color: #888;
}

/* Link styles - Exclude feature icons and specific elements */
a:not(.feature-icon):not(.nav-link):not(.game-link):not(.auth-link):not(.lobby-btn):not(.action-btn):not(.feature-card):not(.cta-btn):not(.btn) {
  color: #fff;
  text-decoration: none;
  margin: 10px;
  background: linear-gradient(to right, #4b5dff, #6b8bff, #aa64f9);
  -webkit-background-clip: text; 
  /* -webkit-text-fill-color: transparent; */
  transition: all 0.5s ease;
}

a:not(.feature-icon):not(.nav-link):not(.game-link):not(.auth-link):not(.lobby-btn):not(.action-btn):not(.feature-card):not(.cta-btn):not(.btn):hover {
  animation: flicker 1s infinite;
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Ensure feature icons display properly */
.feature-icon {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  color: inherit !important;
  margin: 0 !important;
  animation: none !important;
}

.feature-icon:hover {
  animation: none !important;
}

/* Remove underlines from feature cards */
.feature-card {
  text-decoration: none !important;
}

.feature-card:hover {
  text-decoration: none !important;
}

.feature-card * {
  text-decoration: none !important;
}

/* Container for main content */
.container {
  max-width: 800px;
  margin: 0 auto;
}

/* Section styles */
.section-container {
  background-color: rgba(255, 255, 255, 0.03); /* 5% lighter background */
  border-radius: 10px; /* Modern rounded corners */
  padding: 20px;
  margin-bottom: 20px;
  width: 100%;
  max-width: 556px;
}

/* Countdown and prompt styles */
.countdown, .prompt {
  font-weight: bold;
  color: #fff;
}

/* Fade-in animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

.hidden {
  opacity: 0; /* Start hidden */
}

.fade-in {
  animation: fadeIn 1s ease-in-out forwards; /* Added forwards to retain the end state */
}

.fade-in-delayed {
  animation: fadeIn 1s ease-in-out forwards;
}

.game-container {
  background-color: rgba(255, 255, 255, 0.02); /* 4% transparency white */
  border-radius: 10px; /* Rounded corners */
  padding: 10px; /* Optional: add some padding inside the container */
  margin-bottom: 16px;
}

/* Animations */
@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Animations */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}