/* Estilos Globais e Otimizações de UI/UX Mobile-First */
:root {
  --bg-main: #0b0f19;
  --bg-card: #151d30;
  --bg-card-hover: #1e2942;
  --accent-cyan: #06b6d4;
  --accent-pink: #ec4899;
  --accent-yellow: #f59e0b;
  --accent-green: #10b981;
  --accent-red: #ef4444;
}

body {
  background-color: var(--bg-main);
  color: #f8fafc;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

/* Scrollbar estilizada */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.6);
}
::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.4);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.7);
}

.scrollbar-thin::-webkit-scrollbar {
  width: 4px;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.3);
  border-radius: 9999px;
}

/* Previne que a rolagem do chat empurre a página para baixo */
#chat-messages-container {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Animações */
@keyframes pulse-subtle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

@keyframes glow-gold {
  0%, 100% { box-shadow: 0 0 15px rgba(245, 158, 11, 0.4); }
  50% { box-shadow: 0 0 30px rgba(245, 158, 11, 0.8); }
}

@keyframes glow-turn {
  0%, 100% { box-shadow: 0 0 20px rgba(6, 182, 212, 0.4); }
  50% { box-shadow: 0 0 35px rgba(6, 182, 212, 0.8); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.25s ease-out forwards;
}

.animate-pulse-subtle {
  animation: pulse-subtle 3s infinite ease-in-out;
}

.card-my-forehead {
  animation: glow-gold 2s infinite ease-in-out;
}

.active-turn-ring {
  animation: glow-turn 2s infinite ease-in-out;
}

/* Badges e Tags */
.glass-panel {
  background: rgba(21, 29, 48, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-input {
  background: rgba(11, 15, 25, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.glass-input:focus {
  border-color: var(--accent-cyan);
  outline: none;
  box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.25);
}

/* Efeito de confetes no canvas de fundo */
#confetti-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}