/* TEMA E CORES (CSS Variables para coesão)
   Design brief: Dramatic, warm-cold contrast with a sharp accent color.
   Heading font: Cormorant Garamond (elegant, high-contrast serif).
   Body font: Kumbh Sans (friendly rounded sans, geometric) — distinctive pairing.
*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;700&family=Kumbh+Sans:wght@300;400;600&display=swap');

:root {
  --font-title: 'Cormorant Garamond', serif;
  --font-body: 'Kumbh Sans', system-ui, -apple-system, "Segoe UI", Roboto, 'Helvetica Neue', Arial;

  /* Palette: Deep midnight teal background + warm amber accent */
  --color-bg: #071826; /* deep sea midnight */
  --color-bg-2: #0d2a3a; /* secondary deep layer */
  --color-sidebar: rgba(10, 22, 28, 0.6);
  --color-card: rgba(255,255,255,0.03); /* translucent card to let background breathe */
  --color-option: rgba(255,255,255,0.04);
  --color-option-hover: rgba(255,255,255,0.07);

  --text-title: #fffbf6; /* warm ivory for headings */
  --text-primary: #dbeef7; /* pale cyan for general text */
  --text-secondary: #9fb8c6; /* muted cyan-gray for translations */
  --text-accent: #ffb84d; /* amber accent - sharp */

  /* Category colors kept as variables, choose saturated hues for clarity */
  --color-blue: #2dd4bf; /* teal */
  --color-green: #7dd3fc; /* light blue */
  --color-indigo: #8b5cf6;
  --color-yellow: #ffd166; /* soft yellow */
  --color-purple: #ff6b6b; /* coral-ish purple alternative */
  --color-pink: #ff6fb5;
  --color-red: #ff5a5f;
  --color-teal: #14b8a6;
  --color-gray: #98a2b3;

  /* animation timing base */
  --anim-ease: cubic-bezier(.22,.9,.36,1);
  --stagger-step: 60ms;
}

body {
  font-family: var(--font-body);
  color: var(--text-primary);
  min-height: 100vh;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Layered background for atmosphere: radial blob + subtle geometric texture */
  background-color: var(--color-bg);
  background-image:
    radial-gradient(800px 400px at 95% 10%, rgba(255,184,77,0.06), transparent 18%),
    radial-gradient(600px 300px at 10% 90%, rgba(45,212,191,0.05), transparent 20%),
    linear-gradient(180deg, rgba(7,24,38,1) 0%, rgba(13,42,58,1) 100%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.01) 0 1px, transparent 1px 10px);
  background-blend-mode: normal, normal, normal, overlay;
  background-attachment: fixed;
}

/* subtle moving blob for life (very low impact) */
.bg-blob {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

@keyframes blobFloat {
  0% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(-8px,-6px,0) scale(1.02); }
  100% { transform: translate3d(0,0,0) scale(1); }
}

.bg-blob::before {
  content: '';
  position: absolute;
  right: -10vw;
  top: -8vh;
  width: 60vw;
  height: 60vh;
  background: radial-gradient(circle at 30% 30%, rgba(255,184,77,0.06), transparent 25%),
              radial-gradient(circle at 70% 70%, rgba(45,212,191,0.04), transparent 30%);
  filter: blur(40px) saturate(110%);
  transform-origin: center;
  animation: blobFloat 9s var(--anim-ease) infinite;
}

/* Fontes Personalizadas */
.font-title {
  font-family: var(--font-title);
}
.font-body {
  font-family: var(--font-body);
}

/* Barra de Rolagem */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-sidebar);
}
::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

/* ANIMAÇÃO: Staggered reveal */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

.animate-slide-in {
  animation: slideIn 0.4s ease-out forwards;
  opacity: 0; /* Começa invisível */
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-out forwards;
  opacity: 0; /* Começa invisível */
}

/* COMPONENTES REDESENHADOS */

/* Botão da Sidebar */
.sidebar-btn {
  position: relative;
  padding: 10px 16px;
  border-radius: 6px;
  font-weight: 700;
  color: var(--text-primary);
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  border: 2px solid transparent;
  background-color: transparent;
  /* Cor da categoria é definida via JS (var(--category-color)) */
}

.sidebar-btn:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: var(--category-color, var(--text-accent));
}

.sidebar-btn.active {
  background-color: var(--category-color, var(--text-accent));
  color: var(--color-bg);
  border-color: var(--category-color, var(--text-accent));
}

/* Cartão da Pergunta */
.question-card {
  background-color: var(--color-card);
  border-radius: 8px;
  padding: 24px;
  /* Borda colorida é definida via JS (var(--category-color)) */
  border-top: 4px solid var(--category-color, var(--color-gray));
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

/* Botão de Opção */
.option-btn {
  background-color: var(--color-option);
  color: var(--text-primary);
  border: 2px solid var(--color-option);
  border-radius: 8px;
  padding: 12px 16px;
  text-align: left;
  width: 100%;
  transition: all 0.2s ease-in-out;
}

.option-btn:not(:disabled):hover {
  background-color: var(--color-option-hover);
  border-color: var(--text-accent);
}

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

/* Estados de Resposta */
.option-btn.correct {
  background-color: var(--color-green);
  border-color: var(--color-green);
  color: white;
  font-weight: 700;
}
.option-btn.incorrect {
  background-color: var(--color-red);
  border-color: var(--color-red);
  color: white;
  font-weight: 700;
}
/* Para a opção que *era* correta, mas não foi selecionada */
.option-btn.was-correct {
  background-color: transparent;
  border-color: var(--color-green);
  color: var(--text-primary);
}

.feedback-text.correct {
  color: var(--color-green);
}
.feedback-text.incorrect {
  color: var(--color-red);
}

/* Score bar */
#score-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: linear-gradient(180deg, rgba(7,24,38,0.75), rgba(7,24,38,0.6));
  padding: 12px 16px;
  border-radius: 8px;
  align-items: center;
}

/* Modal helpers (kept generic for other UI) */
.hidden { display: none; }
.flex { display: flex; }

/* Small utility: polite accent button matching theme */
.bg-text-accent { background: var(--text-accent); }

/* Mobile category bar styles */
#mobile-category-bar {
  pointer-events: auto;
}
#mobile-category-bar .mobile-cat-btn {
  background: transparent;
  border: none;
  color: var(--text-primary);
  text-align: left;
  font-weight: 700;
}
#mobile-category-list {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 64px;
  z-index: 45;
  padding: 8px;
}
#mobile-category-list .mobile-cat-item {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  color: var(--text-primary);
  text-align: left;
}

/* Hide mobile bar on larger screens (Tailwind 'md' also applied in HTML) */
@media (min-width: 768px) {
  #mobile-category-bar { display: none; }
}