/* ===== Pictionary Shared Styles ===== */

/* ===== CSS Variables ===== */
:root {
  --pictionary-green: #2E7D32;
  --pictionary-green-light: #4CAF50;
  --pictionary-green-dark: #1B5E20;
  --white: #FFFFFF;
  --black: #000000;
  --gray: #666666;
  --gray-light: #CCCCCC;
  --gray-dark: #333333;
  --correct-green: #28a745;
  --wrong-red: #dc3545;
  --gold: #D4A843;
  --font-logo: 'Michroma', sans-serif;
  --font-sans: 'Open Sans', sans-serif;
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-heavy: 0 8px 16px rgba(0, 0, 0, 0.4);
}

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

/* ===== Base Body ===== */
body {
  font-family: var(--font-sans);
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  color: var(--white);
}

/* ===== Common Title ===== */
.title {
  font-family: var(--font-logo);
  color: var(--pictionary-green-light);
  text-align: center;
}

.subtitle {
  text-align: center;
  color: var(--gray-light);
  margin-bottom: 2rem;
}

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

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

/* ===== Timer Urgent State ===== */
.urgent {
  color: var(--wrong-red) !important;
  animation: pulse 1s infinite;
}