/* ===== Shared CSS Variables ===== */
:root {
  /* Jeopardy brand colors */
  --jeopardy-blue: #060CE9;
  --jeopardy-blue-dark: #0509A8;
  --jeopardy-blue-light: #1E24FF;
  --jeopardy-gold: #D4A843;
  --jeopardy-gold-light: #E8C66A;

  /* Base colors */
  --white: #FFFFFF;
  --black: #000000;
  --gray: #666666;
  --gray-light: #CCCCCC;
  --gray-dark: #333333;

  /* Semantic colors */
  --correct-green: #28a745;
  --wrong-red: #dc3545;

  /* Typography */
  --font-logo: 'Michroma', sans-serif;
  --font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ===== Utility Classes ===== */
.hidden {
  display: none !important;
}

/* ===== Common Reset ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ===== Screen Container Pattern ===== */
.screen {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem;
}

.screen.active {
  display: flex;
}

/* ===== Common Button Styles ===== */
.btn {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 600;
  padding: 1rem 2rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--jeopardy-gold);
  color: var(--black);
}

.btn-primary:hover:not(:disabled) {
  background: var(--jeopardy-gold-light);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
}

.btn-secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.3);
}

/* ===== Connection Status Indicator ===== */
.connection-status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transition: background-color 0.3s;
}

.connection-status.connected {
  background: var(--correct-green);
  box-shadow: 0 0 8px var(--correct-green);
}

.connection-status.disconnected {
  background: var(--wrong-red);
  animation: pulse-red 1s infinite;
}

.connection-status.reconnecting {
  background: #ffc107;
  animation: pulse-yellow 1s infinite;
}

@keyframes pulse-red {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes pulse-yellow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ===== Negative Score Styling ===== */
.negative {
  color: var(--wrong-red) !important;
}

.positive {
  color: var(--correct-green) !important;
}