* {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

:root {
  --color-bg-primary: #fef3c7;
  --color-bg-secondary: #fde68a;
  --color-text-primary: #1f2937;
  --color-text-secondary: #374151;
  --color-accent: #fbbf24;
  --color-border: #f59e0b;
}

/* High Contrast Mode */
.high-contrast-mode {
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f5f5f5;
  --color-text-primary: #000000;
  --color-text-secondary: #1a1a1a;
  --color-accent: #0066cc;
  --color-border: #333333;
}

body {
  background: linear-gradient(135deg, rgba(254, 240, 138, 0.5), rgba(147, 197, 253, 0.5));
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

.high-contrast-mode body {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(245, 245, 245, 0.95));
}

.app-background {
  background: linear-gradient(135deg, rgba(254, 240, 138, 0.3), rgba(147, 197, 253, 0.3));
}

.high-contrast-mode .app-background {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(245, 245, 245, 0.9));
}

/* High Contrast Text Elements */
.high-contrast-title {
  color: #003d82;
  text-shadow: 2px 2px 0px #ffffff, -1px -1px 0px #ffffff, 1px -1px 0px #ffffff, -1px 1px 0px #ffffff;
}

.high-contrast-mode .high-contrast-title {
  color: #000000;
  text-shadow: 3px 3px 0px #ffffff, -2px -2px 0px #ffffff;
}

.high-contrast-subtitle {
  color: #1e40af;
}

.high-contrast-mode .high-contrast-subtitle {
  color: #000000;
}

.high-contrast-text {
  color: #1f2937;
}

.high-contrast-mode .high-contrast-text {
  color: #000000;
}

.high-contrast-heading {
  color: #0066cc;
}

.high-contrast-mode .high-contrast-heading {
  color: #000000;
}

.high-contrast-label {
  color: #374151;
}

.high-contrast-mode .high-contrast-label {
  color: #1a1a1a;
}

.high-contrast-link {
  color: #db2777;
}

.high-contrast-mode .high-contrast-link {
  color: #0066cc;
  text-decoration: underline;
}

/* Cards */
.banana-card {
  background: linear-gradient(135deg, rgba(254, 240, 138, 0.95), rgba(253, 224, 71, 0.95));
  backdrop-filter: blur(10px);
  border: 4px solid #f59e0b;
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.high-contrast-mode .banana-card {
  background: #ffffff;
  border: 4px solid #333333;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.player-card {
  background: #fef3c7;
  border: 3px solid #fbbf24;
}

.high-contrast-mode .player-card {
  background: #ffffff;
  border: 3px solid #333333;
}

.player-score-card {
  background: #fef9e7;
  border: 2px solid #fbbf24;
}

.high-contrast-mode .player-score-card {
  background: #f5f5f5;
  border: 2px solid #666666;
}

.player-score-card.active-player {
  background: #dbeafe;
  border: 4px solid #2563eb;
}

.high-contrast-mode .player-score-card.active-player {
  background: #e6f2ff;
  border: 4px solid #0066cc;
}

/* Challenge Card */
.challenge-card {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.9), rgba(29, 78, 216, 0.9));
  border: 4px solid;
  transition: all 0.3s ease;
  animation: slideInBounce 0.6s ease;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.high-contrast-mode .challenge-card {
  background: #ffffff;
  border: 6px solid;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
}

.challenge-card.difficulty-1 {
  border-color: #4ade80;
}

.challenge-card.difficulty-2 {
  border-color: #fbbf24;
}

.challenge-card.difficulty-3 {
  border-color: #f87171;
  animation: shake 0.5s ease;
}

.challenge-card.difficulty-4 {
  border-color: #f97316;
  animation: shake 0.3s ease infinite;
}

.challenge-text {
  color: #ffffff;
  line-height: 1.6;
  letter-spacing: 0.5px;
}

.high-contrast-mode .challenge-text {
  color: #000000;
  line-height: 1.8;
  letter-spacing: 0.8px;
}

.difficulty-badge {
  background: rgba(0, 0, 0, 0.3);
  color: #ffffff;
}

.high-contrast-mode .difficulty-badge {
  background: #000000;
  color: #ffffff;
  border: 2px solid #333333;
}

/* Buttons */
.banana-button {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border: 4px solid #fcd34d;
  color: #1f2937;
  font-weight: 800;
  transition: all 0.2s ease;
  box-shadow: 0 4px 15px rgba(251, 191, 36, 0.4);
  min-height: 56px;
}

.high-contrast-mode .banana-button {
  background: #ffffff;
  border: 4px solid #0066cc;
  color: #000000;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.banana-button:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(251, 191, 36, 0.6);
}

.high-contrast-mode .banana-button:hover {
  background: #e6f2ff;
  transform: scale(1.05);
}

.start-button {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  border: 4px solid #60a5fa;
  color: #ffffff;
  font-weight: 800;
  min-height: 60px;
}

.high-contrast-mode .start-button {
  background: #0066cc;
  border: 4px solid #004499;
  color: #ffffff;
}

.success-button {
  background: #10b981;
  border: 4px solid #34d399;
  color: #ffffff;
  font-weight: 800;
  min-height: 56px;
}

.high-contrast-mode .success-button {
  background: #ffffff;
  border: 4px solid #00aa00;
  color: #000000;
}

.fail-button {
  background: #ef4444;
  border: 4px solid #f87171;
  color: #ffffff;
  font-weight: 800;
  min-height: 56px;
}

.high-contrast-mode .fail-button {
  background: #ffffff;
  border: 4px solid #cc0000;
  color: #000000;
}

.skip-button {
  background: #f59e0b;
  border: 4px solid #fbbf24;
  color: #1f2937;
  font-weight: 800;
  min-height: 56px;
}

.high-contrast-mode .skip-button {
  background: #ffffff;
  border: 4px solid #ff8800;
  color: #000000;
}

.end-button {
  background: #dc2626;
  border: 4px solid #ef4444;
  color: #ffffff;
  font-weight: 800;
  min-height: 56px;
}

.high-contrast-mode .end-button {
  background: #ffffff;
  border: 4px solid #cc0000;
  color: #000000;
}

.high-contrast-button {
  transition: all 0.2s ease;
}

.high-contrast-button:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

button:active {
  transform: scale(0.95);
}

/* Input Elements */
.high-contrast-input {
  background: #ffffff;
  color: #000000;
  border: 3px solid #666666;
  font-size: 18px;
  line-height: 1.5;
}

.high-contrast-mode .high-contrast-input {
  border: 4px solid #000000;
  font-weight: 600;
}

.high-contrast-input:focus {
  outline: none;
  border-color: #0066cc;
  box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.2);
}

.high-contrast-select {
  background: #ffffff;
  color: #000000;
  border: 3px solid #666666;
}

.high-contrast-mode .high-contrast-select {
  border: 4px solid #000000;
  font-weight: 600;
}

/* Timer */
.timer-display {
  color: #dc2626;
  background: #fee2e2;
  padding: 8px 16px;
  border-radius: 12px;
  border: 3px solid #ef4444;
}

.high-contrast-mode .timer-display {
  color: #000000;
  background: #ffffff;
  border: 4px solid #cc0000;
}

/* Stats */
.stat-success {
  color: #059669;
}

.high-contrast-mode .stat-success {
  color: #00aa00;
}

.stat-fail {
  color: #dc2626;
}

.high-contrast-mode .stat-fail {
  color: #cc0000;
}

/* Speech Bubble */
.speech-bubble {
  background: #ffffff;
  padding: 12px 20px;
  border-radius: 20px;
  border: 3px solid #fbbf24;
  position: relative;
  display: inline-block;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  color: #1f2937;
  font-weight: 700;
}

.high-contrast-mode .speech-bubble {
  border: 4px solid #000000;
  color: #000000;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.speech-bubble::before {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 30px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #fbbf24;
}

.high-contrast-mode .speech-bubble::before {
  border-top-color: #000000;
}

.speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 33px;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid white;
}

/* Award Cards */
.award-card {
  border: 4px solid;
  transition: all 0.3s ease;
}

.mvp-card {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.9), rgba(245, 158, 11, 0.9));
  border-color: #f59e0b;
}

.high-contrast-mode .mvp-card {
  background: #ffffff;
  border-color: #00aa00;
}

.banana-card {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(220, 38, 38, 0.9));
  border-color: #dc2626;
}

.high-contrast-mode .banana-card {
  background: #ffffff;
  border-color: #cc0000;
}

.speed-card {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.9), rgba(5, 150, 105, 0.9));
  border-color: #059669;
}

.high-contrast-mode .speed-card {
  background: #ffffff;
  border-color: #0066cc;
}

/* Minion Animation System */
.minion-container {
  transition: all 0.15s ease;
  position: relative;
}

.minion-container.idle {
  animation: idleSway 3s ease-in-out infinite;
}

.minion-container.pre-laugh {
  animation: preLaugh 0.1s ease;
}

.minion-container.start {
  animation: laughStart 0.2s ease;
}

.minion-container.peak {
  animation: peakLaugh 0.4s ease-in-out infinite;
  transform: rotate(var(--lean-angle, 0deg));
}

.minion-container.sustain {
  animation: sustainLaugh 0.5s ease-in-out infinite;
}

.minion-container.wind-down {
  animation: windDownLaugh 0.3s ease;
}

.minion-avatar {
  transition: all 0.15s ease;
}

.minion-avatar.peak {
  transform: scaleY(1.2);
}

.minion-mouth-peak {
  animation: mouthPeak 0.4s ease-in-out infinite;
}

@keyframes idleSway {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(1deg) translateY(-2px); }
}

@keyframes preLaugh {
  0% { transform: scale(1); }
  100% { transform: scale(1.02); }
}

@keyframes laughStart {
  0% { transform: scale(1.02) rotate(0deg); }
  100% { transform: scale(1.05) rotate(-2deg); }
}

@keyframes peakLaugh {
  0% { 
    transform: rotate(var(--lean-angle, 0deg)) translateY(0px) scale(1.05); 
  }
  10% { 
    transform: rotate(calc(var(--lean-angle, 0deg) - 2deg)) translateY(-8px) scale(1.08); 
  }
  20% { 
    transform: rotate(calc(var(--lean-angle, 0deg) + 2deg)) translateY(-6px) scale(1.07); 
  }
  30% { 
    transform: rotate(calc(var(--lean-angle, 0deg) - 1deg)) translateY(-8px) scale(1.08); 
  }
  40% { 
    transform: rotate(calc(var(--lean-angle, 0deg) + 1deg)) translateY(-7px) scale(1.07); 
  }
  50% { 
    transform: rotate(var(--lean-angle, 0deg)) translateY(-8px) scale(1.08); 
  }
  100% { 
    transform: rotate(var(--lean-angle, 0deg)) translateY(0px) scale(1.05); 
  }
}

@keyframes sustainLaugh {
  0%, 100% { 
    transform: scale(1.03) rotate(-1deg); 
  }
  50% { 
    transform: scale(1.04) rotate(1deg); 
  }
}

@keyframes windDownLaugh {
  0% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

@keyframes mouthPeak {
  0%, 100% { transform: scaleY(1) translateY(0); }
  50% { transform: scaleY(1.2) translateY(2px); }
}

@keyframes slideInBounce {
  0% {
    opacity: 0;
    transform: translateY(-50px) scale(0.8);
  }
  60% {
    opacity: 1;
    transform: translateY(10px) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px) rotate(-2deg); }
  75% { transform: translateX(10px) rotate(2deg); }
}

@keyframes bounce-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

@keyframes float-up {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-100px) scale(1.5);
  }
}

@keyframes bounce-celebration {
  0%, 100% { 
    transform: translateY(0) scale(1) rotate(0deg); 
  }
  25% { 
    transform: translateY(-40px) scale(1.2) rotate(10deg); 
  }
  50% { 
    transform: translateY(-60px) scale(1.3) rotate(-10deg); 
  }
  75% { 
    transform: translateY(-40px) scale(1.2) rotate(5deg); 
  }
}

@keyframes spin-celebration {
  0% { transform: rotate(0deg) scale(1); }
  100% { transform: rotate(360deg) scale(1.5); }
}

@keyframes sad-wobble {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
}

@keyframes spin-slow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.animate-bounce-slow {
  animation: bounce-slow 2s ease-in-out infinite;
}

.animate-float-up {
  animation: float-up 3s ease-out forwards;
}

.animate-bounce-celebration {
  animation: bounce-celebration 1s ease-in-out infinite;
}

.animate-spin-celebration {
  animation: spin-celebration 2s linear infinite;
}

.animate-sad-wobble {
  animation: sad-wobble 0.5s ease-in-out infinite;
}

.animate-spin-slow {
  animation: spin-slow 20s linear infinite;
}

.animate-pulse-fast {
  animation: pulse 0.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.minion-wiggle {
  animation: wiggle 2s ease-in-out infinite;
}

.minion-wiggle-hover:hover {
  animation: wiggle 0.5s ease-in-out infinite;
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}

.banana-pulse {
  animation: banana-pulse 2s ease-in-out infinite;
}

@keyframes banana-pulse {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 0 20px rgba(0, 102, 204, 0.4);
  }
  50% { 
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(0, 102, 204, 0.8);
  }
}

/* Accessibility - Focus States */
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 4px solid #0066cc;
  outline-offset: 2px;
}

.high-contrast-mode button:focus-visible,
.high-contrast-mode input:focus-visible,
.high-contrast-mode select:focus-visible {
  outline: 6px solid #000000;
  outline-offset: 3px;
}

/* Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}