/* ===================================================================
   FORTE CULTURAL — DESAFIO LÓGICO
   style.css — Design tokens, reset, layout base e componentes
   =================================================================== */

:root {
  /* Paleta */
  --color-orange: #FF6B00;
  --color-orange-light: #FF8C3D;
  --color-green: #00A651;
  --color-green-dark: #00833F;
  --color-navy: #16213E;
  --color-navy-soft: #1E2C52;
  --color-gray-light: #F6F7FB;
  --color-white: #FFFFFF;

  /* Texto */
  --text-primary: #16213E;
  --text-secondary: #5B6478;
  --text-invert: #FFFFFF;

  /* Superfícies */
  --surface: #FFFFFF;
  --surface-alt: #F6F7FB;
  --surface-glass: rgba(255, 255, 255, 0.65);
  --border-soft: rgba(22, 33, 62, 0.08);

  /* Gradientes */
  --grad-hero: linear-gradient(135deg, #16213E 0%, #1E2C52 45%, #0F1830 100%);
  --grad-brand: linear-gradient(120deg, var(--color-orange) 0%, #FF8C3D 100%);
  --grad-green: linear-gradient(120deg, var(--color-green) 0%, #00C766 100%);

  /* Tipografia */
  --font-display: 'Poppins', system-ui, sans-serif;
  --font-body: 'Poppins', system-ui, sans-serif;

  /* Espaçamento & Raio */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-soft: 0 10px 30px rgba(22, 33, 62, 0.10);
  --shadow-strong: 0 20px 60px rgba(22, 33, 62, 0.25);

  --container-w: 1080px;
  --focus-ring: 0 0 0 3px rgba(255, 107, 0, 0.45);

  /* Tema pop-art / HQ (usado só na página de abertura) */
  --comic-yellow: #FFD400;
  --comic-red: #FF3D3D;
  --comic-orange: #FF8A00;
  --comic-ink: #1A1A1A;
  --font-comic: 'Bangers', 'Poppins', cursive;
}

/* ===================== RESET ===================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--surface-alt);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }

/* Foco visível — acessibilidade */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-orange);
  color: #fff;
  padding: 12px 20px;
  z-index: 999;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* ===================== HEADER ===================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface-glass);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--border-soft);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  padding-bottom: 12px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  color: var(--text-primary);
  transition: opacity .2s ease;
}
.brand:hover { opacity: 0.78; }
.brand img { border-radius: 8px; }

.icon-btn {
  background: var(--surface-alt);
  border: 1px solid var(--border-soft);
  width: 42px;
  height: 42px;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  color: var(--text-primary);
  transition: transform .25s ease, background .25s ease;
}
.icon-btn:hover { transform: rotate(20deg) scale(1.05); background: #fff; }

/* ===================== HERO — ESTÉTICA POP-ART / HQ ===================== */
.hero {
  position: relative;
  background: radial-gradient(120% 130% at 30% 0%, #FFE066 0%, var(--comic-orange) 45%, var(--comic-red) 100%);
  color: var(--comic-ink);
  padding: 40px 0 60px;
  overflow: hidden;
  isolation: isolate;
}
.hero-glow {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(500px 350px at 85% 15%, rgba(255,255,255,0.35), transparent 60%),
    radial-gradient(600px 400px at 10% 90%, rgba(255,61,61,0.35), transparent 60%);
  z-index: -1;
  animation: driftGlow 14s ease-in-out infinite alternate;
}
/* Padrão de pontos (halftone), clássico de quadrinhos pop-art */
.hero-halftone {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(26,26,26,0.16) 1.6px, transparent 1.6px);
  background-size: 16px 16px;
  mask-image: radial-gradient(120% 100% at 50% 0%, black 40%, transparent 90%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, black 40%, transparent 90%);
}
/* Raios e estrela decorativos */
.hero-bolt {
  position: absolute;
  width: 70px;
  height: auto;
  filter: drop-shadow(3px 4px 0 rgba(0,0,0,0.15));
  z-index: 0;
}
.hero-bolt-1 { top: 14%; left: 4%; transform: rotate(-18deg); animation: pulseSoft 3.2s ease-in-out infinite; }
.hero-bolt-2 { bottom: 10%; right: 6%; width: 56px; transform: rotate(14deg); animation: pulseSoft 3.6s ease-in-out infinite 0.4s; }
.hero-star {
  position: absolute;
  top: 8%;
  right: 10%;
  width: 60px;
  height: auto;
  z-index: 0;
  filter: drop-shadow(2px 3px 0 rgba(0,0,0,0.15));
  animation: spinSlow 12s linear infinite;
}
@media (max-width: 768px) {
  .hero-bolt { width: 46px; }
  .hero-bolt-2 { width: 38px; }
  .hero-star { width: 42px; }
}

.hero-inner { text-align: center; max-width: 760px; position: relative; z-index: 1; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--comic-ink);
  border: 3px solid var(--comic-ink);
  color: var(--comic-yellow);
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.25);
}
.eyebrow i { color: var(--comic-yellow); }

.hero-title {
  font-family: var(--font-comic);
  font-weight: 400;
  font-size: clamp(2.3rem, 5.6vw, 4rem);
  line-height: 1.05;
  letter-spacing: 0.03em;
  margin-bottom: 14px;
  color: var(--comic-yellow);
  -webkit-text-stroke: 2.5px var(--comic-ink);
  text-stroke: 2.5px var(--comic-ink);
  text-shadow:
    4px 4px 0 var(--comic-ink),
    -1px -1px 0 var(--comic-ink),
    1px -1px 0 var(--comic-ink),
    -1px 1px 0 var(--comic-ink);
  transform: rotate(-1.5deg);
}
.hero-subtitle {
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 800;
  color: var(--comic-ink);
  background: #fff;
  display: inline-block;
  padding: 6px 18px;
  border-radius: var(--radius-pill);
  border: 3px solid var(--comic-ink);
  box-shadow: 3px 3px 0 rgba(0,0,0,0.2);
  margin-bottom: 18px;
}
.hero-text {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--comic-ink);
  line-height: 1.6;
  margin-bottom: 16px;
}
.hero-text strong { color: #fff; -webkit-text-stroke: 1px var(--comic-ink); }
.hero-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--comic-ink);
  background: rgba(255,255,255,0.75);
  border: 2px solid var(--comic-ink);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 28px;
}
.hero-note i { color: var(--comic-red); }

/* ===================== BOTÕES ===================== */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 1rem;
  padding: 16px 34px;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  will-change: transform;
}
.btn:active { transform: scale(0.97); }
.btn-xl { padding: 19px 44px; font-size: 1.1rem; }

.btn-primary {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: 0 14px 34px rgba(255,107,0,0.38);
}
.btn-primary:hover { filter: brightness(1.06); transform: translateY(-3px); box-shadow: 0 18px 44px rgba(255,107,0,0.46); }

/* Botão "COMEÇAR AGORA" com visual de quadrinho (só no hero) */
.hero #startBtn.btn-primary {
  background: var(--comic-yellow);
  color: var(--comic-ink);
  font-family: var(--font-comic);
  font-weight: 400;
  letter-spacing: 0.04em;
  font-size: 1.3rem;
  border: 4px solid var(--comic-ink);
  border-radius: 16px;
  box-shadow: 6px 6px 0 var(--comic-ink);
}
.hero #startBtn.btn-primary:hover {
  filter: none;
  background: #FFE066;
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--comic-ink);
}
.hero #startBtn.btn-primary:active {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 var(--comic-ink);
}

.btn-secondary {
  background: var(--color-navy);
  color: #fff;
  box-shadow: 0 10px 26px rgba(22,33,62,0.25);
}
.btn-secondary:hover { transform: translateY(-2px); }

.btn-ghost {
  background: transparent;
  color: var(--text-primary);
  border: 2px solid var(--border-soft);
}
.btn-ghost:hover { background: var(--surface-alt); }

.btn-cta {
  background: var(--grad-green);
  color: #fff;
  box-shadow: 0 16px 40px rgba(0,166,81,0.40);
  font-size: 1.2rem;
}
.btn-cta:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 22px 54px rgba(0,166,81,0.5); }

/* Efeito ripple */
.ripple { }
.ripple-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  transform: scale(0);
  animation: rippleAnim .6s ease-out;
  pointer-events: none;
}

/* ===================== REGRAS / RULE CARDS (pop-art) ===================== */
.rules-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.rule-card {
  background: #fff;
  border: 3px solid var(--comic-ink);
  border-radius: var(--radius-md);
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--comic-ink);
  box-shadow: 4px 4px 0 rgba(0,0,0,0.22);
  transition: transform .2s ease, box-shadow .2s ease;
}
.rule-card:hover { transform: translate(-2px, -4px); box-shadow: 6px 8px 0 rgba(0,0,0,0.22); }
.rule-card:nth-child(1) i { color: var(--comic-red); }
.rule-card:nth-child(2) i { color: var(--color-green); }
.rule-card:nth-child(3) i { color: var(--comic-orange); }
.rule-card:nth-child(4) i { color: #7B4FE0; }
.rule-card i { font-size: 1.5rem; }

/* ===================== OPÇÕES DE JOGO EM DESTAQUE (PRIMEIRA TELA) ===================== */
.game-options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 32px 0 8px;
}
.game-option-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  background: #fff;
  border: 3px solid var(--comic-ink);
  border-radius: var(--radius-lg);
  padding: 26px 18px 22px;
  text-decoration: none;
  color: var(--comic-ink);
  box-shadow: 5px 5px 0 rgba(0,0,0,0.2);
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  cursor: pointer;
  font-family: inherit;
}
.game-option-card:hover:not(:disabled) { transform: translateY(-5px) rotate(-0.5deg); box-shadow: 7px 9px 0 rgba(0,0,0,0.2); }
.game-option-card:disabled { cursor: default; }
.game-option-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--opt-color, var(--color-orange));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  margin-bottom: 6px;
  box-shadow: 0 4px 0 rgba(0,0,0,0.15);
}
.game-option-name { font-size: 1.15rem; font-weight: 800; color: var(--opt-color, var(--color-orange)); }
.game-option-desc { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.4; min-height: 2.6em; }
.game-option-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  background: var(--opt-color, var(--color-orange));
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
}

/* ===================== ESCOLHA DE NÍVEL ===================== */
.level-select-section {
  padding: 64px 0;
  background: var(--surface-alt);
  scroll-margin-top: 110px;
}
.level-select-container { max-width: 900px; margin: 0 auto; text-align: center; }
.level-select-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.level-select-subtitle {
  color: var(--text-secondary);
  max-width: 520px;
  margin: 0 auto 36px;
  line-height: 1.6;
}
.level-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.level-card {
  background: var(--surface);
  border: 3px solid var(--level-card-color, var(--color-orange));
  border-radius: var(--radius-lg);
  padding: 32px 22px;
  text-align: center;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: var(--shadow-soft);
}
.level-card:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(0,0,0,0.14); }
.level-card-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  color: #fff;
  background: var(--level-card-color, var(--color-orange));
}
.level-card-name {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--level-card-color, var(--color-orange));
  margin-bottom: 8px;
}
.level-card-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 18px;
}
.level-card-btn {
  display: inline-block;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  background: var(--level-card-color, var(--color-orange));
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
}

/* ===================== QUIZ SECTION ===================== */
.quiz-section {
  padding: 60px 0 40px;
  background: var(--surface-alt);
  scroll-margin-top: 110px; /* evita que o topo fique escondido atrás do cabeçalho fixo ao rolar */
  --level-color: var(--color-orange);
  --level-color-light: #FFF1E0;
}
.quiz-container { width: 100%; max-width: 780px; margin: 0 auto; }

.quiz-topbar { margin-bottom: 24px; }
.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--level-color);
  color: #fff;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
  transition: background .3s ease;
}
.tier-badge-block {
  font-weight: 600;
  opacity: 0.85;
}
.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-weight: 700;
  color: var(--text-primary);
}
.timer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-navy);
  color: #fff;
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.progress-track {
  height: 12px;
  border-radius: var(--radius-pill);
  background: rgba(22,33,62,0.08);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0%;
  border-radius: var(--radius-pill);
  background: var(--level-color);
  transition: width .5s cubic-bezier(.65,0,.35,1), background .3s ease;
}

.question-stage { position: relative; min-height: 380px; }

.question-card {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 44px 36px;
  text-align: center;
  border-top: 6px solid var(--level-color);
  transition: border-color .3s ease;
}

/* Cronômetro de pressão — conta o tempo gasto na pergunta atual */
.question-timer-badge {
  position: absolute;
  top: 18px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-alt);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums;
  transition: background .25s ease, color .25s ease;
}
.question-timer-badge.pressure {
  background: rgba(255, 60, 60, 0.14);
  color: #FF3C3C;
  animation: pulseSoft 1s ease-in-out infinite;
}
.question-number {
  display: inline-block;
  background: var(--level-color-light);
  color: var(--level-color);
  font-weight: 800;
  font-size: 0.8rem;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 18px;
  letter-spacing: 0.04em;
  transition: background .3s ease, color .3s ease;
}
.question-text {
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 30px;
  color: var(--text-primary);
}
.options-grid {
  display: grid;
  gap: 14px;
  text-align: left;
}
.option-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: var(--surface-alt);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  padding: 16px 20px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: left;
  transition: all .2s ease;
}
.option-letter {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--level-color);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.85rem;
  transition: background .3s ease;
}
.option-btn:hover { border-color: var(--level-color); transform: translateX(4px); }
.option-btn.correct { background: rgba(0,166,81,0.14); border-color: var(--color-green); }
.option-btn.correct .option-letter { background: var(--color-green); }
.option-btn.wrong { background: rgba(255,60,60,0.12); border-color: #FF3C3C; }
.option-btn.wrong .option-letter { background: #FF3C3C; }
.option-btn.disabled { pointer-events: none; opacity: 0.75; }
.option-btn .fa-check, .option-btn .fa-xmark { margin-left: auto; }

/* ===================== FAIXA LATERAL (PROMO RAIL) =====================
   Mobile/tablet: cartão estático acima da pergunta.
   Desktop largo (ver responsive.css): fixa no lado direito da tela. */
.promo-rail {
  margin-bottom: 22px;
}
.hero-rail {
  margin-top: 32px;
  margin-bottom: 0;
}
.promo-rail-inner {
  background: linear-gradient(135deg, #16213E, #26375F);
  border-radius: var(--radius-lg);
  padding: 22px;
  text-align: center;
  color: #fff;
  box-shadow: var(--shadow-soft);
}
.promo-rail-mockup {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 0 auto 14px;
  max-width: 180px;
  box-shadow: 0 16px 34px rgba(0,0,0,0.35);
  transition: transform .3s ease;
}
.promo-rail-mockup:hover { transform: scale(1.05) rotate(-1deg); }
.promo-rail-mockup img { width: 100%; height: auto; display: block; }
.promo-rail-emoji { font-size: 1.5rem; }
.promo-rail-title {
  font-weight: 800;
  font-size: 1rem;
  margin: 6px 0 6px;
  color: var(--color-orange-light);
  letter-spacing: 0.02em;
}
.promo-rail-text { color: rgba(255,255,255,0.8); margin-bottom: 16px; font-size: 0.88rem; }
.btn-sm { padding: 12px 20px; font-size: 0.85rem; width: 100%; }

/* ===================== RESULTADO ===================== */
/* ===================== BLOCO CONCLUÍDO (interstitial) ===================== */
.block-complete-section {
  min-height: 60vh;
  display: flex;
  align-items: center;
  padding: 60px 0;
  background: var(--surface-alt);
  scroll-margin-top: 110px;
}
.block-complete-container { max-width: 560px; margin: 0 auto; width: 100%; }
.block-complete-card {
  background: var(--grad-hero);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 50px 34px;
  text-align: center;
  box-shadow: var(--shadow-strong);
  animation: popIn .45s cubic-bezier(.34,1.56,.64,1) both;
}
.block-complete-emoji { font-size: 3.6rem; margin-bottom: 10px; }
.block-complete-title { font-size: 1.6rem; font-weight: 800; margin-bottom: 14px; }
.block-complete-score { font-size: 1.05rem; color: rgba(255,255,255,0.9); margin-bottom: 6px; }
.block-complete-overall { font-size: 0.92rem; color: rgba(255,255,255,0.7); margin-bottom: 22px; }
.block-complete-warning {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-size: 0.92rem;
  color: #FFD9B8;
  margin-bottom: 28px;
}
.block-complete-actions { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.block-complete-actions .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.3); }
.block-complete-actions .btn-ghost:hover { background: rgba(255,255,255,0.1); }

.result-section { padding: 60px 0 100px; background: var(--surface-alt); scroll-margin-top: 110px; }
.result-container { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }

.result-card {
  background: var(--grad-hero);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 50px 34px;
  text-align: center;
  box-shadow: var(--shadow-strong);
}
.result-emoji { font-size: 4rem; margin-bottom: 10px; }
.result-level { font-size: 1.9rem; font-weight: 800; margin-bottom: 6px; }
.result-score { font-size: 1.1rem; color: rgba(255,255,255,0.8); margin-bottom: 26px; }
.result-message { max-width: 460px; margin: 0 auto 30px; color: rgba(255,255,255,0.85); line-height: 1.6; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 10px;
}
.stat-box {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-md);
  padding: 16px 10px;
}
.stat-value { font-size: 1.4rem; font-weight: 800; color: var(--color-orange-light); }
.stat-label { font-size: 0.75rem; color: rgba(255,255,255,0.75); margin-top: 4px; }

.section-title {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-title i { color: var(--color-orange); }

/* ===================== ESTATÍSTICAS DA COMUNIDADE =====================
   Mostradas de forma sempre positiva/incentivadora, nunca como um
   placar de "ganhou/perdeu" contra outros jogadores. */
.community-stats {
  margin-top: 26px;
  display: grid;
  gap: 12px;
}
.community-stats.loading .community-card {
  opacity: 0.5;
}
.community-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  text-align: left;
  transition: opacity .3s ease;
}
.community-card-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  background: rgba(255,107,0,0.18);
  color: var(--color-orange-light);
}
.community-card-text {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.88);
  line-height: 1.5;
}
.community-card-text strong { color: #fff; }

.review-list { display: flex; flex-direction: column; gap: 12px; }
.review-item {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  box-shadow: var(--shadow-soft);
  border-left: 5px solid var(--color-green);
}
.review-item.wrong { border-left-color: #FF3C3C; }
.review-q { font-weight: 700; margin-bottom: 8px; display: flex; gap: 10px; align-items: flex-start; }
.review-q i { margin-top: 4px; }
.review-item.correct .review-q i { color: var(--color-green); }
.review-item.wrong .review-q i { color: #FF3C3C; }
.review-row { font-size: 0.9rem; margin: 4px 0; color: var(--text-secondary); }
.review-row strong { color: var(--text-primary); }
.review-explain {
  margin-top: 8px;
  font-size: 0.88rem;
  background: var(--surface-alt);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--text-secondary);
}

.card-surface {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-soft);
}
.cert-form { display: flex; gap: 12px; flex-wrap: wrap; }
.cert-form input {
  flex: 1;
  min-width: 220px;
  padding: 15px 18px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border-soft);
  font-size: 1rem;
  font-family: inherit;
}
.cert-form input:focus { border-color: var(--color-orange); }

.share-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.share-btn {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: none;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  color: #fff;
  transition: transform .2s ease;
}
.share-btn:hover { transform: translateY(-4px) scale(1.08); }
.share-btn.wa { background: #25D366; }
.share-btn.fb { background: #1877F2; }
.share-btn.tg { background: #229ED9; }
.share-btn.x { background: #000; }
.share-btn.copy { background: var(--color-navy); }
.share-btn.native { background: var(--color-orange); }
.share-feedback { margin-top: 12px; font-size: 0.9rem; color: var(--color-green); font-weight: 600; min-height: 20px; }

#restartBtn { align-self: center; }

/* ===================== CTA FINAL ===================== */
.cta-final {
  background: var(--grad-green);
  padding: 56px 0 70px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.cta-inner { max-width: 620px; margin: 0 auto; position: relative; z-index: 1; }
.stars { font-size: 1.4rem; margin-bottom: 16px; letter-spacing: 4px; }
.cta-final h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); font-weight: 800; margin-bottom: 22px; line-height: 1.3; }
.cta-list { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; margin-bottom: 34px; font-weight: 600; }
.cta-list li { display: flex; align-items: center; gap: 8px; }
.cta-list i { background: rgba(255,255,255,0.2); border-radius: 50%; padding: 6px; font-size: 0.75rem; }

/* ===================== FOOTER ===================== */
.site-footer {
  background: var(--color-navy);
  color: rgba(255,255,255,0.6);
  text-align: center;
  padding: 26px 0;
  font-size: 0.85rem;
}

/* ===================== CONFETTI CANVAS ===================== */
.confetti-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  width: 100%;
  height: 100%;
}

/* Certificado — canvas escondido usado só para gerar imagem/PDF */
#certCanvas { display: none; }