/* ============================================================
   SIMULADO ALECE — Premium Animations & Design Upgrade
   Centro de Mediação do Ceará
   ============================================================ */

/* ── Variáveis Premium ─────────────────────────────────────── */
:root {
  --gradiente-medio:    linear-gradient(135deg, #0D47A1 0%, #1565C0 50%, #42A5F5 100%);
  --gradiente-superior: linear-gradient(135deg, #1B5E20 0%, #2E7D32 50%, #66BB6A 100%);
  --gradiente-ouro:     linear-gradient(135deg, #F57F17, #FBC02D, #F9A825);
  --sombra-premium:     0 20px 60px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.1);
  --sombra-card-hover:  0 24px 48px rgba(21,101,192,0.25);
  --raio-lg:            20px;
  --transicao-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─────────────────────────────────────────────────────────────
   FUNDO DO BODY — gradiente sutil animado
   ───────────────────────────────────────────────────────────── */
body {
  background: linear-gradient(160deg, #F0F4FF 0%, #F5F7FA 40%, #EEF2FF 100%);
  background-attachment: fixed;
}

/* ─────────────────────────────────────────────────────────────
   CABEÇALHO — fundo escuro institucional + logo oficial
   ───────────────────────────────────────────────────────────── */
.cabecalho {
  background: linear-gradient(135deg, #0a1628 0%, #0D2B55 40%, #133a6b 70%, #0a1628 100%);
  background-size: 300% 300%;
  animation: gradienteHeader 12s ease infinite;
  box-shadow: 0 4px 32px rgba(0,0,0,0.5);
  border-bottom: 2px solid rgba(255,255,255,0.08);
}

@keyframes gradienteHeader {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Logo oficial no cabeçalho — fundo escuro: screen remove o branco */
.cabecalho-logo-img {
  height: 40px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  object-position: left center;
  mix-blend-mode: screen;
  filter: brightness(1.1) contrast(1.05);
  transition: transform 0.3s ease, filter 0.3s ease;
  flex-shrink: 0;
}
.cabecalho-logo-img:hover {
  transform: scale(1.04);
  filter: brightness(1.25);
}

/* Divisor vertical entre logo e título */
.cabecalho-divisor {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,0.22);
  margin: 0 12px;
  flex-shrink: 0;
}

/* Logo hero na tela inicial — fundo claro: multiply remove o branco */
.hero-logo-img {
  width: min(280px, 75%);
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto 18px;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.12));
  animation: entradaLogoHero 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes entradaLogoHero {
  from { opacity: 0; transform: scale(0.88) translateY(-8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

body.nivel-superior .cabecalho {
  background: linear-gradient(135deg, #1B5E20 0%, #2E7D32 40%, #43A047 70%, #1B5E20 100%);
  background-size: 300% 300%;
  animation: gradienteHeader 10s ease infinite;
  box-shadow: 0 4px 24px rgba(27,94,32,0.4);
}

/* ─────────────────────────────────────────────────────────────
   TELA — transição cinematográfica
   ───────────────────────────────────────────────────────────── */
.tela.ativa {
  animation: entradaTela 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes entradaTela {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Badge de anos no hero */
.hero-badge-ano {
  display: inline-block;
  background: linear-gradient(135deg, #0D47A1, #1565C0);
  color: white;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 5px 18px;
  border-radius: 20px;
  margin-bottom: 14px;
  box-shadow: 0 4px 14px rgba(21,101,192,0.35);
  animation: entradaStat 0.6s ease 0.3s both;
}

/* ─────────────────────────────────────────────────────────────
   HERO — partículas flutuantes + ícone pulsante
   ───────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  padding: 56px 20px 40px;
}

/* Partículas CSS puras */
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  opacity: 0.06;
  animation: flutuar 8s ease-in-out infinite;
  pointer-events: none;
}
.hero::before {
  width: 300px; height: 300px;
  background: var(--cor-primaria, #1565C0);
  top: -80px; right: -80px;
  animation-duration: 9s;
}
.hero::after {
  width: 200px; height: 200px;
  background: var(--cor-primaria, #1565C0);
  bottom: -40px; left: -40px;
  animation-duration: 11s;
  animation-delay: -3s;
}
@keyframes flutuar {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(20px, -15px) scale(1.05); }
  66%       { transform: translate(-10px, 20px) scale(0.95); }
}

/* hero-icone removido — substituído por logo oficial */

.hero h1 {
  background: linear-gradient(135deg, #0D47A1, #1565C0, #42A5F5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradienteTexto 4s ease infinite;
  background-size: 200% 200%;
}
@keyframes gradienteTexto {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

/* Stats com contagem animada */
.hero-stat-num {
  background: linear-gradient(135deg, #0D47A1, #1976D2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 2rem;
}
.hero-stat {
  animation: entradaStat 0.6s var(--transicao-bounce) both;
}
.hero-stat:nth-child(1) { animation-delay: 0.1s; }
.hero-stat:nth-child(2) { animation-delay: 0.2s; }
.hero-stat:nth-child(3) { animation-delay: 0.3s; }
.hero-stat:nth-child(4) { animation-delay: 0.4s; }

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

/* ─────────────────────────────────────────────────────────────
   CARDS DE NÍVEL — 3D hover + gradiente interno
   ───────────────────────────────────────────────────────────── */
.card-nivel {
  border-radius: var(--raio-lg);
  transition: transform 0.4s var(--transicao-bounce),
              box-shadow 0.4s ease,
              border-color 0.3s ease;
  animation: entradaCard 0.6s var(--transicao-bounce) both;
  will-change: transform;
  background: white;
  position: relative;
  overflow: hidden;
}
.card-nivel:nth-child(1) { animation-delay: 0.15s; }
.card-nivel:nth-child(2) { animation-delay: 0.30s; }

@keyframes entradaCard {
  from { opacity: 0; transform: translateY(30px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.card-nivel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 60%, rgba(255,255,255,0.08));
  pointer-events: none;
}

.card-nivel:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: var(--sombra-card-hover);
}

.card-nivel.medio:hover   { border-color: var(--cor-medio); }
.card-nivel.superior:hover { border-color: var(--cor-superior); }

.card-nivel-icone {
  font-size: 56px;
  display: block;
  margin-bottom: 14px;
  transition: transform 0.4s var(--transicao-bounce);
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
}
.card-nivel:hover .card-nivel-icone {
  transform: scale(1.15) translateY(-4px) rotate(-5deg);
}

/* Linha superior com gradiente */
.card-nivel.medio::before {
  background: var(--gradiente-medio);
  height: 5px;
}
.card-nivel.superior::before {
  background: var(--gradiente-superior);
  height: 5px;
}

/* ─────────────────────────────────────────────────────────────
   BOTÕES — ripple + hover premium
   ───────────────────────────────────────────────────────────── */
.btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s var(--transicao-bounce),
              box-shadow 0.3s ease,
              background 0.3s ease;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 50% 50%;
  background: rgba(255,255,255,0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.5s ease, opacity 0.5s ease;
  opacity: 0;
}
.btn:active::after {
  transform: translate(-50%, -50%) scale(4);
  opacity: 0;
  transition: 0s;
}

.btn-primario {
  background: linear-gradient(135deg, var(--cor-primaria), var(--cor-primaria-light));
  box-shadow: 0 6px 20px rgba(21,101,192,0.3);
  letter-spacing: 0.3px;
}
.btn-primario:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(21,101,192,0.4);
}
.btn-primario:active { transform: translateY(-1px); }

.btn-secundario:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(21,101,192,0.15);
}

/* ─────────────────────────────────────────────────────────────
   CARDS DE CONFIGURAÇÃO — glassmorphism leve
   ───────────────────────────────────────────────────────────── */
.card-config {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: var(--raio-lg);
  box-shadow: 0 4px 24px rgba(21,101,192,0.08);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.card-config:hover {
  box-shadow: 0 8px 32px rgba(21,101,192,0.12);
  transform: translateY(-2px);
}

/* ─────────────────────────────────────────────────────────────
   BARRA DE PROGRESSO — shimmer animado
   ───────────────────────────────────────────────────────────── */
.barra-progresso-wrap {
  height: 8px;
  border-radius: 4px;
  background: rgba(0,0,0,0.08);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.barra-progresso {
  background: linear-gradient(90deg,
    var(--cor-primaria) 0%,
    var(--cor-primaria-light) 50%,
    var(--cor-primaria) 100%);
  background-size: 200% 100%;
  animation: shimmerBarra 2s linear infinite;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(21,101,192,0.4);
}
@keyframes shimmerBarra {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ─────────────────────────────────────────────────────────────
   CARD DA QUESTÃO
   ───────────────────────────────────────────────────────────── */
.questao-card {
  border-radius: var(--raio-lg);
  border: 1px solid rgba(21,101,192,0.08);
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
  animation: entradaTela 0.4s ease both;
}

/* ─────────────────────────────────────────────────────────────
   ALTERNATIVAS — entrada escalonada + hover premium
   ───────────────────────────────────────────────────────────── */
.alternativa {
  border-radius: 12px;
  transition: all 0.25s var(--transicao-bounce);
  animation: entradaAlt 0.4s ease both;
  position: relative;
  overflow: hidden;
}
.alternativa:nth-child(1) { animation-delay: 0.05s; }
.alternativa:nth-child(2) { animation-delay: 0.10s; }
.alternativa:nth-child(3) { animation-delay: 0.15s; }
.alternativa:nth-child(4) { animation-delay: 0.20s; }
.alternativa:nth-child(5) { animation-delay: 0.25s; }

@keyframes entradaAlt {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

.alternativa:hover:not(:disabled) {
  transform: translateX(6px);
  border-color: var(--cor-primaria);
  background: var(--cor-bg-card);
  box-shadow: 0 4px 16px rgba(21,101,192,0.15);
}

.alternativa.correta {
  animation: acertoAnim 0.5s var(--transicao-bounce);
  box-shadow: 0 4px 16px rgba(46,125,50,0.25);
}
@keyframes acertoAnim {
  0%  { transform: scale(1); }
  40% { transform: scale(1.03) translateX(6px); }
  70% { transform: scale(0.98) translateX(2px); }
  100%{ transform: scale(1) translateX(0); }
}

.alternativa.errada {
  animation: erroAnim 0.4s ease;
  box-shadow: 0 4px 16px rgba(198,40,40,0.2);
}
@keyframes erroAnim {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-8px); }
  40%       { transform: translateX(8px); }
  60%       { transform: translateX(-5px); }
  80%       { transform: translateX(5px); }
}

/* ─────────────────────────────────────────────────────────────
   FEEDBACK DE RESPOSTA
   ───────────────────────────────────────────────────────────── */
.feedback-resposta.visivel {
  animation: entradaFeedback 0.4s var(--transicao-bounce);
  border-radius: 12px;
  font-size: 0.95rem;
}
@keyframes entradaFeedback {
  from { opacity: 0; transform: translateY(10px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.feedback-resposta.correto {
  background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
  border: 1px solid rgba(46,125,50,0.3);
  box-shadow: 0 4px 16px rgba(46,125,50,0.15);
}
.feedback-resposta.errado {
  background: linear-gradient(135deg, #FFEBEE, #FFCDD2);
  border: 1px solid rgba(198,40,40,0.3);
  box-shadow: 0 4px 16px rgba(198,40,40,0.15);
}

/* ─────────────────────────────────────────────────────────────
   EXPLICAÇÃO
   ───────────────────────────────────────────────────────────── */
.explicacao-box.visivel {
  display: block;
  animation: entradaExplicacao 0.45s var(--transicao-bounce);
  background: linear-gradient(135deg, #F3F8FF, #EEF5FF);
  border-radius: 14px;
  border-left: 5px solid var(--cor-primaria);
  box-shadow: 0 4px 20px rgba(21,101,192,0.1);
}
@keyframes entradaExplicacao {
  from { opacity: 0; max-height: 0; transform: translateY(8px); }
  to   { opacity: 1; max-height: 600px; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────────
   MAPA DE QUESTÕES
   ───────────────────────────────────────────────────────────── */
.mapa-questoes {
  border-radius: var(--raio-lg);
  background: linear-gradient(135deg, #FAFCFF, white);
  border: 1px solid rgba(21,101,192,0.08);
}

.mapa-item {
  border-radius: 8px;
  transition: all 0.25s var(--transicao-bounce);
}
.mapa-item:hover {
  transform: scale(1.2);
  z-index: 1;
}
.mapa-item.atual {
  background: linear-gradient(135deg, var(--cor-primaria), var(--cor-primaria-light));
  box-shadow: 0 4px 12px rgba(21,101,192,0.4);
  animation: pulsoMapa 2s ease-in-out infinite;
}
@keyframes pulsoMapa {
  0%, 100% { box-shadow: 0 4px 12px rgba(21,101,192,0.4); }
  50%       { box-shadow: 0 4px 20px rgba(21,101,192,0.7); }
}

/* ─────────────────────────────────────────────────────────────
   TELA DE RESULTADO — celebração
   ───────────────────────────────────────────────────────────── */
.resultado-hero {
  border-radius: var(--raio-lg);
  background: linear-gradient(160deg, #FAFCFF 0%, white 60%, #EEF5FF 100%);
  border: 1px solid rgba(21,101,192,0.1);
  box-shadow: var(--sombra-premium);
  position: relative;
  overflow: hidden;
}

.resultado-hero::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(21,101,192,0.06) 0%, transparent 70%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: pulsoFundo 3s ease-in-out infinite;
}
@keyframes pulsoFundo {
  0%, 100% { transform: translate(-50%,-50%) scale(1); }
  50%       { transform: translate(-50%,-50%) scale(1.2); }
}

.resultado-icone {
  animation: celebracao 0.8s var(--transicao-bounce) both;
  display: inline-block;
  position: relative;
  z-index: 1;
}
@keyframes celebracao {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  60%  { transform: scale(1.3) rotate(10deg); }
  80%  { transform: scale(0.9) rotate(-5deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.resultado-nota {
  background: linear-gradient(135deg, #0D47A1, #1565C0, #42A5F5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: entradaNota 0.7s var(--transicao-bounce) 0.2s both;
  display: inline-block;
}
@keyframes entradaNota {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}

.stat-item {
  border-radius: 14px;
  background: linear-gradient(135deg, #F8FAFF, #F5F7FA);
  transition: transform 0.3s var(--transicao-bounce);
  animation: entradaStat 0.5s var(--transicao-bounce) both;
  border: 1px solid rgba(21,101,192,0.08);
}
.stat-item:nth-child(1) { animation-delay: 0.3s; }
.stat-item:nth-child(2) { animation-delay: 0.4s; }
.stat-item:nth-child(3) { animation-delay: 0.5s; }
.stat-item:nth-child(4) { animation-delay: 0.6s; }

.stat-item:hover { transform: translateY(-4px) scale(1.03); }

/* Barras de desempenho por matéria */
.materia-barra-fill {
  background: linear-gradient(90deg, var(--cor-acerto), #66BB6A);
  box-shadow: 0 2px 8px rgba(46,125,50,0.3);
  transition: width 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.materia-barra-fill.media {
  background: linear-gradient(90deg, #F57F17, #FFC107);
  box-shadow: 0 2px 8px rgba(245,127,23,0.3);
}
.materia-barra-fill.baixa {
  background: linear-gradient(90deg, #C62828, #EF5350);
  box-shadow: 0 2px 8px rgba(198,40,40,0.3);
}

/* ─────────────────────────────────────────────────────────────
   HISTÓRICO
   ───────────────────────────────────────────────────────────── */
.historico-item {
  border-radius: var(--raio-lg);
  transition: transform 0.3s var(--transicao-bounce), box-shadow 0.3s ease;
  border: 1px solid rgba(21,101,192,0.06);
}
.historico-item:hover {
  transform: translateX(6px);
  box-shadow: 0 8px 24px rgba(21,101,192,0.12);
}

/* ─────────────────────────────────────────────────────────────
   MODAL — entrada premium
   ───────────────────────────────────────────────────────────── */
.modal-overlay.ativo {
  backdrop-filter: blur(6px);
  background: rgba(0,0,0,0.45);
  animation: fadeOverlay 0.3s ease;
}
@keyframes fadeOverlay {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal {
  animation: entradaModal 0.4s var(--transicao-bounce);
  border-radius: var(--raio-lg);
  box-shadow: 0 32px 80px rgba(0,0,0,0.3);
}
@keyframes entradaModal {
  from { opacity: 0; transform: scale(0.85) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ─────────────────────────────────────────────────────────────
   TIMER
   ───────────────────────────────────────────────────────────── */
.timer {
  background: linear-gradient(135deg, var(--cor-bg-card), rgba(255,255,255,0.9));
  border-radius: 24px;
  box-shadow: 0 2px 12px rgba(21,101,192,0.15);
  transition: all 0.4s ease;
}

/* ─────────────────────────────────────────────────────────────
   BADGE DO CABEÇALHO — brilho
   ───────────────────────────────────────────────────────────── */
.cabecalho-badge {
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
  animation: entradaBadge 0.5s var(--transicao-bounce);
}
@keyframes entradaBadge {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

/* ─────────────────────────────────────────────────────────────
   SCROLLBAR PREMIUM
   ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.04); border-radius: 4px; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #90A4AE, #B0BEC5);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #1565C0, #42A5F5);
  background-clip: padding-box;
}

/* ─────────────────────────────────────────────────────────────
   TAG-MATERIA — hover glow
   ───────────────────────────────────────────────────────────── */
.tag-materia {
  transition: all 0.2s ease;
}
.tag-materia:hover {
  background: var(--cor-bg-card);
  border-color: var(--cor-primaria);
  color: var(--cor-primaria);
  transform: scale(1.05);
}

/* ─────────────────────────────────────────────────────────────
   REVISÃO — entrada suave
   ───────────────────────────────────────────────────────────── */
.revisao-item {
  border-radius: var(--raio-lg);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.revisao-item:hover {
  transform: translateX(4px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

/* ─────────────────────────────────────────────────────────────
   BOTÃO MATÉRIA ATIVO — gradiente
   ───────────────────────────────────────────────────────────── */
.btn-materia.ativo {
  background: linear-gradient(135deg, var(--cor-primaria), var(--cor-primaria-light));
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(21,101,192,0.3);
  transform: scale(1.02);
}

/* ─────────────────────────────────────────────────────────────
   BANNER ALECE — imagem institucional premium na hero
   ───────────────────────────────────────────────────────────── */
.banner-alece-wrap {
  width: 100%;
  max-width: 860px;
  margin: 0 auto 28px auto;
  border-radius: 18px;
  overflow: hidden;
  /* Imagem como background — não aparece como <img> no DOM */
  background-image: url('banner-alece.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Proporção 16:5 — mantém aspecto original do banner */
  aspect-ratio: 16 / 5;
  /* Proteção contra seleção e arrastar */
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  box-shadow:
    0 12px 40px rgba(13,43,85,0.22),
    0 4px 14px rgba(0,0,0,0.12),
    0 0 0 2px rgba(13,43,85,0.08);
  animation: entradaBanner 0.7s var(--transicao-bounce) both;
  transition: transform 0.35s var(--transicao-bounce),
              box-shadow 0.35s ease;
}

.banner-alece-wrap:hover {
  transform: translateY(-4px) scale(1.008);
  box-shadow:
    0 20px 56px rgba(13,43,85,0.28),
    0 8px 24px rgba(0,0,0,0.14),
    0 0 0 2px rgba(13,43,85,0.12);
}

/* Imagem inline: bloqueia clique direito e arrastar */
img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

@keyframes entradaBanner {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ─────────────────────────────────────────────────────────────
   SEÇÃO NOVAS QUESTÕES / ATUALIZAÇÕES DO AGENTE
   ───────────────────────────────────────────────────────────── */
.novas-questoes-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.novas-meta {
  font-size: 0.82rem;
  color: var(--cor-texto-secundario);
  background: rgba(21,101,192,0.06);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 4px;
}

.novidade-item {
  background: var(--cor-bg-card);
  border-radius: 10px;
  padding: 12px 14px;
  border-left: 4px solid var(--cor-borda);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.novidade-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.novidade-item.urgente {
  border-left-color: #1565C0;
  background: linear-gradient(135deg, rgba(21,101,192,0.05), var(--cor-bg-card));
}
.novidade-fonte {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--cor-texto-secundario);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.novidade-titulo {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cor-primaria);
  text-decoration: none;
  line-height: 1.4;
}
.novidade-titulo:hover { text-decoration: underline; }
.novidade-data {
  font-size: 0.75rem;
  color: var(--cor-texto-secundario);
}

/* ─────────────────────────────────────────────────────────────
   RODAPÉ
   ───────────────────────────────────────────────────────────── */
footer {
  background: linear-gradient(180deg, transparent, rgba(21,101,192,0.03));
}

/* ============================================================
   PREMIUM ANIMATIONS — Adicionado para Simulado ALECE 2026
   ============================================================ */

/* ── Variáveis de design premium ─────────────────────────── */
:root {
  --glass-bg:      rgba(255,255,255,0.04);
  --glass-border:  rgba(255,255,255,0.10);
  --glass-blur:    20px;
  --accent-glow:   rgba(99,102,241,0.25);
  --radius-premium: 20px;
  --sombra-premium: 0 8px 32px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.06) inset;
}

/* ── Glassmorphism nos cards ──────────────────────────────── */
.questao-card, .card-config, .card-nivel, .resultado-hero {
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--sombra-premium) !important;
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.questao-card:hover, .card-nivel:hover {
  border-color: rgba(99,102,241,0.3) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(99,102,241,0.15) !important;
  transform: translateY(-2px);
}

/* ── Transições de questão ────────────────────────────────── */
@keyframes sairEsquerda {
  from { opacity:1; transform:translateX(0) scale(1); filter:blur(0); }
  to   { opacity:0; transform:translateX(-50px) scale(0.97); filter:blur(4px); }
}
@keyframes sairDireita {
  from { opacity:1; transform:translateX(0) scale(1); filter:blur(0); }
  to   { opacity:0; transform:translateX(50px) scale(0.97); filter:blur(4px); }
}
@keyframes entrarDireita {
  from { opacity:0; transform:translateX(50px) scale(0.97); filter:blur(4px); }
  to   { opacity:1; transform:translateX(0) scale(1); filter:blur(0); }
}
@keyframes entrarEsquerda {
  from { opacity:0; transform:translateX(-50px) scale(0.97); filter:blur(4px); }
  to   { opacity:1; transform:translateX(0) scale(1); filter:blur(0); }
}
.questao-sai-esq  { animation: sairEsquerda  0.3s cubic-bezier(.4,0,1,1) forwards; }
.questao-sai-dir  { animation: sairDireita   0.3s cubic-bezier(.4,0,1,1) forwards; }
.questao-entra-dir { animation: entrarDireita 0.4s cubic-bezier(.16,1,.3,1) forwards; }
.questao-entra-esq { animation: entrarEsquerda 0.4s cubic-bezier(.16,1,.3,1) forwards; }

/* ── Barra de progresso premium ──────────────────────────── */
.barra-progresso {
  background: linear-gradient(90deg,#6366f1,#8b5cf6,#a78bfa) !important;
  background-size: 200% 100% !important;
  animation: shimmerBarra 2s linear infinite;
  box-shadow: 0 0 12px rgba(99,102,241,0.5);
  border-radius: 99px;
  position: relative;
}
@keyframes shimmerBarra {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}
.barra-progresso-wrap {
  border-radius: 99px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}

/* ── Timer SVG ────────────────────────────────────────────── */
.timer-wrap-svg {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}
.timer-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer-fundo { fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 8; }
.timer-anel  { fill: none; stroke: #6366f1; stroke-width: 8; stroke-linecap: round;
  stroke-dasharray: 283; stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear, stroke 0.5s ease;
  filter: drop-shadow(0 0 6px rgba(99,102,241,0.7));
}
.timer-anel.timer-aviso  { stroke: #f59e0b; filter: drop-shadow(0 0 6px rgba(245,158,11,0.7)); }
.timer-anel.timer-perigo { stroke: #ef4444; animation: pulsoTimer 0.5s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 8px rgba(239,68,68,0.9)); }
@keyframes pulsoTimer {
  from { filter: drop-shadow(0 0 4px rgba(239,68,68,0.6)); }
  to   { filter: drop-shadow(0 0 14px rgba(239,68,68,1)); }
}
.timer-numero {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
}

/* ── Feedback de alternativa ──────────────────────────────── */
@keyframes shakeOpcao {
  0%,100% { transform:translateX(0); }
  15%     { transform:translateX(-8px) rotate(-1deg); }
  30%     { transform:translateX(8px)  rotate(1deg); }
  45%     { transform:translateX(-5px); }
  60%     { transform:translateX(5px); }
  75%     { transform:translateX(-3px); }
}
.opcao-shake { animation: shakeOpcao 0.45s cubic-bezier(.36,.07,.19,.97) both;
  border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,0.3) !important; }

@keyframes flashCerto {
  0%   { box-shadow: 0 0 0 0 rgba(16,185,129,0.8); }
  50%  { box-shadow: 0 0 0 16px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
.opcao-correta-flash { animation: flashCerto 0.5s ease-out forwards;
  border-color: #10b981 !important; }

/* ── Ripple ───────────────────────────────────────────────── */
.btn-ripple { position: relative; overflow: hidden; }
.ripple-onda {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transform: scale(0); animation: expandirRipple 0.6s linear forwards;
  pointer-events: none;
}
@keyframes expandirRipple { to { transform: scale(4); opacity: 0; } }

/* ── Toast ────────────────────────────────────────────────── */
#toast-container {
  position: fixed; top: 1.25rem; right: 1.25rem;
  z-index: 10000; display: flex; flex-direction: column;
  gap: 0.6rem; width: 300px; pointer-events: none;
}
.toast {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.875rem 1rem; border-radius: 14px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  pointer-events: all; animation: toastEntrar 0.4s cubic-bezier(.16,1,.3,1) forwards;
}
.toast-success { background: rgba(16,185,129,0.13); border-color: rgba(16,185,129,0.3); }
.toast-error   { background: rgba(239,68,68,0.12);  border-color: rgba(239,68,68,0.3); }
.toast-info    { background: rgba(99,102,241,0.12);  border-color: rgba(99,102,241,0.3); }
.toast-warning { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.3); }
.toast-icone   { font-size:1rem; flex-shrink:0; }
.toast-corpo   { flex:1; }
.toast-titulo  { font-size:0.875rem; font-weight:600; color:#f0f0ff; }
.toast-msg     { font-size:0.78rem; color:rgba(240,240,255,0.6); margin-top:2px; }
.toast-fechar  { background:none; border:none; color:rgba(255,255,255,0.35); cursor:pointer; font-size:0.9rem; padding:0; }
.toast-fechar:hover { color:rgba(255,255,255,0.8); }
@keyframes toastEntrar { from { opacity:0; transform:translateX(110%); } to { opacity:1; transform:translateX(0); } }
@keyframes toastSair   { from { opacity:1; transform:translateX(0); } to { opacity:0; transform:translateX(110%); } }
.toast-saindo { animation: toastSair 0.3s cubic-bezier(.4,0,1,1) forwards; }

/* ── Score counter ────────────────────────────────────────── */
@keyframes scoreBump { 0%{transform:scale(1)} 40%{transform:scale(1.2)} 70%{transform:scale(0.95)} 100%{transform:scale(1)} }
.score-bump { animation: scoreBump 0.4s cubic-bezier(.16,1,.3,1); }
@keyframes deltaSubir { 0%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(-2rem)} }
.score-delta {
  position:absolute; top:-0.5rem; right:-0.8rem;
  font-size:0.8rem; font-weight:700; color:#34d399;
  animation: deltaSubir 1.2s ease-out forwards; pointer-events:none;
  white-space:nowrap;
}

/* ── Alternativas premium ─────────────────────────────────── */
.alternativas-lista .alternativa {
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
}
.alternativas-lista .alternativa:hover:not(:disabled):not(.desabilitada) {
  transform: translateX(6px);
  box-shadow: -4px 0 0 var(--cor-primaria, #1565C0), 0 4px 16px rgba(0,0,0,0.2);
}

/* ── Hero badge com pulse ─────────────────────────────────── */
.hero-badge-ano {
  animation: entradaHero 0.8s cubic-bezier(.16,1,.3,1) both;
  animation-delay: 0.2s;
}
@keyframes entradaHero {
  from { opacity:0; transform: translateY(16px) scale(0.96); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}

/* ── Botões premium com glow ──────────────────────────────── */
.btn-primario {
  box-shadow: 0 4px 16px rgba(21,101,192,0.35), 0 1px 0 rgba(255,255,255,0.15) inset !important;
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}
.btn-primario:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(21,101,192,0.5) !important;
  filter: brightness(1.1) !important;
}
.btn-primario:active { transform: translateY(0) !important; }

/* ── Mapa de questões premium ─────────────────────────────── */
.mapa-grid .mapa-item {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mapa-grid .mapa-item:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 1;
}

/* ── Loading skeleton (para futuro uso) ───────────────────── */
@keyframes skeleton {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: skeleton 1.5s ease-in-out infinite;
  border-radius: 8px;
}