/* =============================================
   INCIDENT MOOD SYSTEM
   Animated faces + team scene for incidents
   ============================================= */

/* === MOOD BADGE (inside incident cards) === */

.mood-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 4px;
  padding: 4px 8px;
  border-radius: 20px;
  width: fit-content;
  transition: all 0.3s ease;
}

.mood-face {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.mood-label {
  font-size: 0.7rem;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Tier colors for badge background */
.mood-tier-calm .mood-label { color: #34d399; }
.mood-tier-calm.mood-badge { background: rgba(52, 211, 153, 0.1); }

.mood-tier-sweat .mood-label { color: #fbbf24; }
.mood-tier-sweat.mood-badge { background: rgba(251, 191, 36, 0.1); }

.mood-tier-tense .mood-label { color: #f97316; }
.mood-tier-tense.mood-badge { background: rgba(249, 115, 22, 0.15); }

.mood-tier-crisis .mood-label {
  color: #ef4444;
  animation: crisis-text-pulse 0.8s ease-in-out infinite;
}
.mood-tier-crisis.mood-badge {
  background: rgba(239, 68, 68, 0.15);
  animation: crisis-badge-shake 0.5s ease-in-out infinite;
}

/* Sparkle animation for calm */
.mood-sparkle {
  animation: sparkle-float 2s ease-in-out infinite;
  fill: #fbbf24;
}

/* Alarm animation for crisis */
.mood-alarm {
  animation: alarm-blink 0.6s ease-in-out infinite alternate;
  fill: #fca5a5;
}

/* === TEAM PANEL === */

.team-panel {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border-subtle, #222940);
  margin-top: 12px;
  transition: all 0.4s ease;
}

.team-panel-header {
  padding: 10px 14px;
  background: var(--bg-elevated, #1a2035);
}

.team-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.team-panel-title .mood-face {
  width: 32px;
  height: 32px;
}

.team-panel-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.team-panel-status {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary, #e8eaf0);
}

.team-panel-elapsed {
  font-size: 0.68rem;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-muted, #6b7394);
}

.team-panel-scene {
  padding: 8px 10px 4px;
  background: var(--bg-surface, #131825);
  display: flex;
  justify-content: center;
  overflow-x: auto;
}

.team-scene {
  height: 80px;
  width: auto;
  max-width: 100%;
}

/* Crisis tier panel */
.team-panel.mood-tier-crisis {
  border-color: rgba(239, 68, 68, 0.4);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.15);
}

.team-panel.mood-tier-crisis .team-panel-header {
  background: rgba(127, 29, 29, 0.3);
}

.team-panel.mood-tier-crisis .team-panel-status {
  color: #fca5a5;
}

/* Tense tier panel */
.team-panel.mood-tier-tense {
  border-color: rgba(249, 115, 22, 0.3);
}

.team-panel.mood-tier-tense .team-panel-status {
  color: #fdba74;
}

/* Sweat tier panel */
.team-panel.mood-tier-sweat {
  border-color: rgba(251, 191, 36, 0.2);
}

/* Calm tier panel */
.team-panel.mood-tier-calm {
  border-color: rgba(52, 211, 153, 0.2);
}

/* === TEAM TOGGLE BUTTON === */

.team-toggle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-elevated, #1a2035);
  border: 1px solid var(--border-subtle, #222940);
  border-radius: 8px;
  color: var(--text-secondary, #a0a8c0);
  font-size: 0.72rem;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
  width: 100%;
  justify-content: center;
}

.team-toggle-btn:hover {
  background: var(--bg-overlay, #222940);
  color: var(--text-primary, #e8eaf0);
}

.team-toggle-btn .mood-face {
  width: 18px;
  height: 18px;
}

.team-toggle-btn.active {
  border-color: rgba(96, 165, 250, 0.3);
  color: #60a5fa;
}

/* === ANIMATIONS === */

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

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

@keyframes sparkle-float {
  0%, 100% { opacity: 0.6; transform: translateY(0) scale(1); }
  50% { opacity: 1; transform: translateY(-2px) scale(1.2); }
}

@keyframes alarm-blink {
  0% { opacity: 0.3; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1.1); }
}

/* === RESPONSIVE === */

@media (max-width: 768px) {
  .mood-face { width: 22px; height: 22px; }
  .mood-label { font-size: 0.62rem; }
  .team-scene { height: 65px; }
  .team-panel-title .mood-face { width: 26px; height: 26px; }
}