/* Player estatico dos funis exportados do XQuiz.
   As cores e espacamentos vem do bloco "theme" do export, injetados como
   variaveis CSS pelo build. Aqui so mora a estrutura. */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --xq-bg: #111;
  --xq-text: #fff;
  --xq-accent: #888;
  --xq-radius: 10px;
  --xq-gap: 16px;
  --xq-maxw: 480px;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--xq-bg);
  color: var(--xq-text);
  font-family: Poppins, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
}

body { min-height: 100vh; }

#xq-app {
  /* coluna do XQuiz original: 512 px de conteúdo com 20 px de respiro lateral */
  max-width: calc(512px + 40px);
  margin: 0 auto;
  padding: 16px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: var(--xq-gap);
  min-height: 100vh;
}

/* ---------- utilidades ---------- */

.xq-hidden { display: none !important; }

.xq-anim-fade-in { animation: xq-fade .45s ease both; }
@keyframes xq-fade { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }

.xq-anim-pulse { animation: xq-pulse 1s ease infinite; }
@keyframes xq-pulse { 0%, 100% { transform: scale(.98); } 50% { transform: scale(1.02); } }

@media (prefers-reduced-motion: reduce) {
  .xq-anim-pulse { animation: none; }
  .xq-anim-fade-in { animation-duration: .01s; }
}

/* o conteudo dos blocos vem do editor rico com <p>/<span> ja estilizados */
.xq-rich p { margin: 0 0 6px; line-height: 1.45; }
.xq-rich p:last-child { margin-bottom: 0; }
.xq-rich a { color: inherit; }

/* ---------- cabecalho ---------- */

.xq-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 32px;
}
.xq-header img { display: block; height: auto; max-width: 100%; }
.xq-back {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: inherit;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

/* ---------- barra de progresso ---------- */

.xq-progress {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, .16);
}
.xq-progress-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--xq-accent);
  transition: width .8s cubic-bezier(.4, 0, .2, 1);
}

/* ---------- titulo / texto ---------- */

.xq-title { display: flex; flex-direction: column; gap: 8px; }
.xq-title .xq-subtitle { opacity: .88; }

/* ---------- imagem ---------- */

.xq-image { display: flex; }
.xq-image.xq-align-center { justify-content: center; }
.xq-image.xq-align-left { justify-content: flex-start; }
.xq-image.xq-align-right { justify-content: flex-end; }
.xq-image img { max-width: 100%; height: auto; border-radius: var(--xq-radius); display: block; }
.xq-image.xq-linkable img { cursor: pointer; }

/* ---------- video ---------- */

.xq-video { width: 100%; }
/* o embed do VTurb vem com max-width:400px inline; no XQuiz original o vídeo ocupa a coluna toda */
.xq-video vturb-smartplayer { max-width: 100% !important; }
.xq-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--xq-radius); display: block; }

/* ---------- quiz ---------- */

.xq-quiz { display: grid; gap: 10px; }
.xq-quiz.xq-cols-1 { grid-template-columns: 1fr; }
.xq-quiz.xq-cols-2 { grid-template-columns: 1fr 1fr; }
.xq-quiz.xq-cols-3 { grid-template-columns: repeat(3, 1fr); }

.xq-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--xq-radius);
  background: var(--xq-option-bg, rgba(255, 255, 255, .1));
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.xq-option:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) {
  .xq-option:hover { filter: brightness(1.12); }
}
.xq-option.xq-selected { outline: 2px solid var(--xq-accent); }
.xq-option-emoji { font-size: 26px; line-height: 1; flex: none; }
.xq-option-img { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; flex: none; }
.xq-option-text { flex: 1 1 auto; min-width: 0; }
.xq-option.xq-place-image-top { flex-direction: column; align-items: center; text-align: center; }
.xq-option.xq-place-image-right { flex-direction: row-reverse; }

/* ---------- botao ---------- */

.xq-button-wrap { display: flex; }
.xq-button-wrap.xq-align-center { justify-content: center; }
.xq-button-wrap.xq-align-left { justify-content: flex-start; }
.xq-button-wrap.xq-align-right { justify-content: flex-end; }

/* "Destacar" no editor: igual ao XQuiz original, o botão gruda no rodapé com
   um degradê escuro atrás (medido no funil original: 48 px de respiro acima,
   24 px abaixo, 20 px nas laterais, coluna de 512 px). */
.xq-button-wrap.xq-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 48px 20px 24px;
  background: linear-gradient(to top, rgb(2, 6, 23) 55%, rgba(2, 6, 23, 0));
  pointer-events: none;
}
.xq-button-wrap.xq-fixed > .block-button {
  display: block; /* centraliza mesmo se o wrap perder o flex */
  max-width: 512px;
  margin: 0 auto;
  pointer-events: auto;
}
/* espaço no fim da página para o conteúdo não ficar preso embaixo do botão */
body.xq-has-fixed #xq-app { padding-bottom: 112px; }

/* Na tela com vídeo o botão destacado fica abaixo do player, sem cobrir o fim
   do vídeo: 32 px de respiro no celular e 48 px a partir de 768 px. */
.xq-button-wrap.xq-abaixo-video { margin-top: calc(32px - var(--xq-gap)); }
@media (min-width: 768px) { .xq-button-wrap.xq-abaixo-video { margin-top: calc(48px - var(--xq-gap)); } }
.xq-button-wrap.xq-abaixo-video > .block-button { display: block; margin: 0 auto; }

.block-button {
  display: block;
  width: 100%;
  padding: 20px 0;
  border: 0;
  border-bottom: 8px solid rgba(206, 182, 84, .1);
  border-radius: 10.4px;
  background: var(--xq-accent);
  color: #fff;
  font: inherit;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.block-button:hover, .block-button:active {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);
}
.block-button:active { opacity: .8; }
.block-button p { margin: 0; }

/* ---------- carregamento ---------- */

.xq-loading { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.xq-loading.xq-loading-absolute {
  position: fixed;
  inset: 0;
  justify-content: center;
  background: var(--xq-bg);
  z-index: 90;
  padding: 24px;
}
.xq-loading-bar {
  width: 100%;
  max-width: 320px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  overflow: hidden;
}
.xq-loading-fill { height: 100%; width: 0; background: var(--xq-accent); border-radius: 999px; }
.xq-loading-pct { font-size: 13px; opacity: .8; }

/* ---------- script ---------- */

.xq-script { width: 100%; }
.xq-script.xq-script-hidden { display: none; }

/* ---------- aviso de asset faltando (so aparece em ?debug=1) ---------- */
.xq-missing {
  display: none;
  border: 1px dashed rgba(255, 255, 255, .35);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  opacity: .7;
}
body.xq-debug .xq-missing { display: block; }