/* Modern CSS Reset & Base Styles */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Modern Color Palette - High Contrast & Accessible */
  --primary-color: #6366f1;
  /* Indigo */
  --primary-light: #8b5cf6;
  /* Purple */
  --primary-dark: #4338ca;
  --secondary-color: #f59e0b;
  /* Amber */
  --success-color: #10b981;
  /* Emerald */
  --warning-color: #f59e0b;
  --danger-color: #ef4444;
  /* Red */
  --info-color: #06b6d4;
  /* Cyan */

  /* Neutral Colors */
  --white: #ffffff;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* Game-specific Colors */
  --game-bg-start: #667eea;
  --game-bg-end: #764ba2;
  --magical-purple: #DA70D6;
  --magical-indigo: #9932CC;
  --cheshire-glow: rgba(218, 112, 214, 0.5);

  /* Typography */
  --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-display: 'Fredoka One', cursive;
  --font-size-xs: 0.75rem;
  /* 12px */
  --font-size-sm: 0.875rem;
  /* 14px */
  --font-size-base: 1rem;
  /* 16px */
  --font-size-lg: 1.125rem;
  /* 18px */
  --font-size-xl: 1.25rem;
  /* 20px */
  --font-size-2xl: 1.5rem;
  /* 24px */
  --font-size-3xl: 1.875rem;
  /* 30px */
  --font-size-4xl: 2.25rem;
  /* 36px */

  /* Spacing */
  --space-1: 0.25rem;
  /* 4px */
  --space-2: 0.5rem;
  /* 8px */
  --space-3: 0.75rem;
  /* 12px */
  --space-4: 1rem;
  /* 16px */
  --space-5: 1.25rem;
  /* 20px */
  --space-6: 1.5rem;
  /* 24px */
  --space-8: 2rem;
  /* 32px */
  --space-10: 2.5rem;
  /* 40px */
  --space-12: 3rem;
  /* 48px */

  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
}
body, html {
  width: 100%;
  height: 100%;
  font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--gray-800);
  overflow: hidden;
  background: linear-gradient(135deg, var(--game-bg-start), var(--game-bg-end));
    transition: background var(--transition-slow);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Game Container */
#game-container {
  width: 100%;
  height: 100vh;
  position: relative;
  cursor: default;
    display: flex;
    flex-direction: column;
}

/* Game Header */
.game-header {
  position: absolute;
  top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--space-6);
    z-index: 10;
  pointer-events: none;
}

.game-title {
  text-align: right;
}

.game-title h1 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-3xl);
  font-weight: 400;
  color: var(--white);
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.02em;
}

.game-title .subtitle {
  font-size: var(--font-size-lg);
  color: rgba(255, 255, 255, 0.9);
  margin: var(--space-1) 0 0;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Score Display */
#score {
  position: relative;
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--gray-800);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.2);
  pointer-events: auto;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  min-width: 150px;
  text-align: center;
}

#score:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}

/* Game Messages */
#message {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--white);
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-2xl);
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all var(--transition-base);
    opacity: 0;
    pointer-events: none;
    min-width: 200px;
    z-index: 50;
  }
  
  #message.show {
    opacity: 1;
    transform: translateX(-50%) translateY(-10px);
  }
        #message.success {
          background: rgba(16, 185, 129, 0.9);
          border-color: rgba(16, 185, 129, 0.3);
          color: var(--white);
        }
    
        #message.error {
          background: rgba(239, 68, 68, 0.9);
          border-color: rgba(239, 68, 68, 0.3);
          color: var(--white);
        }
    
        #message.milestone {
          background: linear-gradient(135deg, var(--secondary-color), #f97316);
          border-color: rgba(245, 158, 11, 0.3);
          color: var(--white);
          font-size: var(--font-size-3xl);
          font-weight: 700;
          animation: milestone-celebration 0.6s ease-out;
        }
    
        @keyframes milestone-celebration {
          0% {
            transform: translateX(-50%) scale(0.8) rotate(-5deg);
            opacity: 0;
          }
    
          50% {
            transform: translateX(-50%) scale(1.1) rotate(2deg);
          }
    
          100% {
            transform: translateX(-50%) scale(1) rotate(0deg);
            opacity: 1;
          }
        }
    
        /* Cheshire Cat - Enhanced Modern Styling */
        .magical-character {
  width: 80px;
  height: 80px;
  position: absolute;
  display: none;
  cursor: pointer;
  user-select: none;
  transition: all var(--transition-base);
  opacity: 0;
  filter: drop-shadow(0 4px 12px var(--cheshire-glow));
    border-radius: var(--radius-full);
    border: none;
  background: transparent;
  z-index: 20;
  }
  
                .magical-character:focus {
                  outline: 3px solid var(--primary-color);
                  outline-offset: 4px;
                }
        
                .magical-character svg {
                  width: 100%;
                  height: 100%;
  transition: all var(--transition-base);
    animation: cheshire-glow 3s ease-in-out infinite;
}

.magical-character:hover {
  transform: scale(1.15) rotate(8deg);
  filter: drop-shadow(0 8px 25px rgba(218, 112, 214, 0.8)) drop-shadow(0 12px 35px rgba(139, 0, 139, 0.6)) drop-shadow(0 0 40px rgba(255, 255, 255, 0.4));
}
.magical-character:hover svg {
  transform: scale(1.05);
  filter: brightness(1.2) saturate(1.3) contrast(1.1);
}

.magical-character:active {
  transform: scale(0.95) rotate(-2deg);
  transition: transform 0.1s ease-out;
}

/* Chaotic Cursor - Enhanced Styling */
#cursor-chaos {
  user-select: none;
  z-index: 100;
  animation: cursor-pulse 2s infinite;
    cursor: pointer;
    transition: all var(--transition-base);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

#cursor-chaos:hover {
  transform: scale(1.2) rotate(15deg) !important;
  box-shadow: 0 8px 30px rgba(255, 105, 180, 0.6),
      0 0 40px rgba(255, 105, 180, 0.4);
    filter: brightness(1.1) saturate(1.2);
}

#cursor-chaos:active {
  transform: scale(0.9) !important;
  transition: transform 0.1s ease-out;
}

@keyframes cursor-pulse {
  0%, 100% {
    box-shadow: 0 4px 15px rgba(255, 105, 180, 0.4);
      transform: scale(1);
  }
  
  50% {
    box-shadow: 0 8px 25px rgba(255, 105, 180, 0.7),
        0 0 30px rgba(255, 105, 180, 0.3);
      transform: scale(1.05);
    }
    }
    
    /* Enhanced Animation Keyframes */
    @keyframes cheshire-glow {
    
      0%,
      100% {
        filter: drop-shadow(0 4px 12px rgba(218, 112, 214, 0.5)) drop-shadow(0 2px 8px rgba(153, 50, 204, 0.4));
      }
    
      50% {
        filter: drop-shadow(0 8px 20px rgba(218, 112, 214, 0.8)) drop-shadow(0 12px 30px rgba(139, 0, 139, 0.6)) drop-shadow(0 0 35px rgba(255, 255, 255, 0.4));
      }
    }

@keyframes shake {
0%,
  100% {
    transform: translateX(0) translateY(0);
  }

  10% {
    transform: translateX(-8px) translateY(-4px) rotate(-1deg);
  }

  20% {
    transform: translateX(8px) translateY(4px) rotate(1deg);
  }

  30% {
    transform: translateX(-6px) translateY(-3px) rotate(-0.5deg);
  }

  40% {
    transform: translateX(6px) translateY(3px) rotate(0.5deg);
  }

  50% {
    transform: translateX(-4px) translateY(-2px);
  }

  60% {
    transform: translateX(4px) translateY(2px);
  }

  70% {
    transform: translateX(-2px) translateY(-1px);
  }

  80% {
    transform: translateX(2px) translateY(1px);
  }

  90% {
    transform: translateX(-1px) translateY(-0.5px);
  }
}
@keyframes rainbow {
  0% {
    filter: hue-rotate(0deg) saturate(1.2);
    }
    
    25% {
      filter: hue-rotate(90deg) saturate(1.4);
    }
    
    50% {
      filter: hue-rotate(180deg) saturate(1.6);
    }
    
    75% {
      filter: hue-rotate(270deg) saturate(1.4);
  }

  100% {
    filter: hue-rotate(360deg) saturate(1.2);
  }
}

@keyframes glow {
  0%,
  100% {
    box-shadow: 0 4px 20px rgba(255, 105, 180, 0.4);
    transform: scale(1);
  }
  
  50% {
    box-shadow: 0 8px 40px rgba(255, 105, 180, 0.8),
        0 0 60px rgba(255, 255, 255, 0.3);
      transform: scale(1.08);
  }
}

@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
    transform: rotate(0deg);
  }
                33% {
    background-position: 100% 50%;
    transform: rotate(120deg);
  }
                66% {
                  background-position: 0% 100%;
                  transform: rotate(240deg);
                }
  100% {
    background-position: 0% 50%;
    transform: rotate(360deg);
  }
}

@keyframes danger-pulse {
  0% {
    transform: scale(1);
    filter: brightness(100%) drop-shadow(0 4px 12px red);
    }
    
    50% {
      transform: scale(1.15);
      filter: brightness(130%) drop-shadow(0 8px 25px red) drop-shadow(0 0 30px rgba(255, 0, 0, 0.6));
    }
    
    100% {
      transform: scale(1);
        filter: brightness(100%) drop-shadow(0 4px 12px red);
      }
      }
      
      /* Utility Classes */
      .confetti {
        animation: rainbow 2s linear infinite;
      }
      
      .game-element {
        transition: all var(--transition-base);
      }
      
      .visually-hidden {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
      }
      
      /* Focus Management */
      .focus-ring {
        outline: 2px solid var(--primary-color);
        outline-offset: 2px;
      }
      
      /* Performance Optimizations */
      .will-change-transform {
        will-change: transform;
      }
      
      .will-change-opacity {
        will-change: opacity;
      }
      
      /* Reduced Motion Support */
      @media (prefers-reduced-motion: reduce) {
      
        *,
        *::before,
        *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }
      
        .magical-character svg {
          animation: none;
        }
      
        #cursor-chaos {
          animation: none;
        }
      }
      
      /* Mobile Responsiveness */
      @media (max-width: 768px) {
        .game-header {
          padding: var(--space-4);
          flex-direction: column;
          align-items: center;
          gap: var(--space-3);
        }
      
        .game-title {
          text-align: center;
          order: -1;
        }
      
        .game-title h1 {
          font-size: var(--font-size-2xl);
        }
      
        .game-title .subtitle {
          font-size: var(--font-size-base);
        }
      
        #score {
          font-size: var(--font-size-xl);
          padding: var(--space-3) var(--space-5);
          min-width: 120px;
        }
      
        #message {
          font-size: var(--font-size-xl);
          padding: var(--space-3) var(--space-6);
          bottom: var(--space-6);
        }
      
        .magical-character {
          width: 70px;
          height: 70px;
        }
      
        #cursor-chaos {
          width: 35px;
          height: 35px;
          font-size: var(--font-size-lg);
        }
      }
      
      @media (max-width: 480px) {
        .game-header {
          padding: var(--space-3);
        }
      
        .game-title h1 {
          font-size: var(--font-size-xl);
        }
      
        #score {
          font-size: var(--font-size-lg);
          padding: var(--space-2) var(--space-4);
        }
      
        #message {
          font-size: var(--font-size-lg);
          padding: var(--space-2) var(--space-4);
        }
      
        .magical-character {
          width: 60px;
          height: 60px;
        }
      
        #cursor-chaos {
          width: 30px;
          height: 30px;
          font-size: var(--font-size-base);
        }
      }

/* High Contrast Mode */
@media (prefers-contrast: high) {
  :root {
    --primary-color: #0000ff;
    --danger-color: #ff0000;
    --success-color: #008000;
  }

    #score {
      background: var(--white);
      border: 2px solid var(--gray-800);
  }
  
                #message {
                  background: var(--gray-900);
                  border: 2px solid var(--white);
  }
}