:root {
  --color-primary: #667eea;
  --color-primary-dark: #764ba2;
  --color-text: #333;
  --color-text-muted: #666;
  --color-success: #28a745;
  --color-danger: #dc3545;
  --color-neutral: #6c757d;
  --color-surface-subtle: #f8f9fa;
  --color-border: #dee2e6;
  --color-team-1: #1565c0;
  --color-team-2: #c62828;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  font-family: 'Arial', sans-serif;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  min-height: 100vh;
  padding: 20px;
}

.container {
  margin: 0 auto;
  background: white;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

h1 {
  color: var(--color-text);
}

.error-message,
.success-message {
  border-radius: 8px;
  padding: 15px;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}