/* =====================================================================
   QUIZ ENGINE — CSS base (mobile-first)
   Tema 100% via CSS variables definidas pelo config (engine.js aplica em :root).
   Layout separado da lógica: aqui só estilo. Variantes por body[data-layout].
   ===================================================================== */

:root{
  /* Tema padrão — sobrescrito por config.theme via JS */
  --primary:#FB923C;
  --primary-hover:#F97316;
  --primary-soft:#FFF7ED;
  --accent:#17A34A;
  --accent-hover:#15803D;
  --bg:#FFFFFF;
  --title:#030712;
  --body:#6B7280;
  --border:#E5E7EB;
  --radius:12px;
  --btn-radius:50px;      /* button_shape: pill=50px, rounded=12px, square=4px */
  --font:'Inter', system-ui, -apple-system, sans-serif;
  --shadow:0 4px 14px rgba(0,0,0,.12);
  --maxw:480px;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{height:100%;}
body{
  min-height:100dvh;
  font-family:var(--font);
  background:var(--bg);
  color:var(--title);
  line-height:1.5;
  overflow-x:hidden;
}

/* ---------- Progress bar ---------- */
#progress-track{
  position:fixed;top:0;left:0;width:100%;height:6px;
  background:var(--border);z-index:100;display:none;
}
#progress-fill{
  height:100%;width:0;background:var(--primary);
  transition:width .4s ease;position:relative;
}
#progress-dot{
  position:absolute;left:0;top:-1px;width:8px;height:8px;
  border-radius:50%;background:var(--primary);
}

/* ---------- Back button ---------- */
#btn-back{
  position:fixed;top:calc(14px + env(safe-area-inset-top));left:14px;z-index:101;
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--border);background:var(--bg);
  display:none;align-items:center;justify-content:center;
  cursor:pointer;font-size:20px;color:var(--title);
  transition:background .2s ease;
}
#btn-back:hover{background:var(--primary-soft);}

/* ---------- App container ---------- */
#app{
  width:100%;max-width:var(--maxw);margin:0 auto;
  padding:calc(64px + env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom));
  min-height:100dvh;display:flex;flex-direction:column;
}

/* ---------- Screen transitions ---------- */
.screen{display:none;flex-direction:column;flex:1;}
.screen.active{display:flex;animation:slideIn .3s ease-out;}
@keyframes slideIn{ from{opacity:0;transform:translateX(24px);} to{opacity:1;transform:translateX(0);} }
@keyframes slideOut{ from{opacity:1;transform:translateX(0);} to{opacity:0;transform:translateX(-24px);} }
.screen.leaving{animation:slideOut .3s ease-out forwards;}
@media (prefers-reduced-motion: reduce){
  .screen.active,.screen.leaving{animation:none;}
}

/* ---------- Question ---------- */
.q-title{
  font-size:22px;font-weight:600;color:var(--title);
  text-align:center;line-height:1.3;margin-bottom:24px;
}
.q-intro{
  font-style:italic;color:var(--title);font-size:15px;
  line-height:1.6;text-align:center;margin-bottom:24px;white-space:pre-line;
}
.q-image{width:100%;border-radius:var(--radius);margin-bottom:20px;}
.options{display:flex;flex-direction:column;}
.option{
  width:100%;padding:14px 16px;border:1px solid var(--border);
  border-radius:var(--radius);margin-bottom:10px;display:flex;
  align-items:center;gap:12px;cursor:pointer;min-height:44px;
  transition:border-color .2s ease, background .2s ease;background:var(--bg);
  text-align:left;font-family:inherit;
}
.option:hover{border-color:var(--primary);background:var(--primary-soft);}
.option.selected{border-color:var(--primary);background:var(--primary-soft);}
.option .emoji{font-size:24px;flex-shrink:0;line-height:1;}
.option .label{font-size:15px;font-weight:400;color:var(--title);flex:1;}
.option .marker{
  width:20px;height:20px;border-radius:50%;
  border:2px solid var(--border);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:border-color .2s ease;
}
.option.selected .marker{border-color:var(--primary);}
.option.selected .marker::after{content:'';width:10px;height:10px;border-radius:50%;background:var(--primary);}
.option.checkbox .marker{border-radius:5px;}
.option.checkbox.selected .marker::after{width:11px;height:11px;border-radius:2px;}

/* ---------- Buttons ---------- */
.btn-cta{
  background:var(--primary);color:#fff;border:none;
  border-radius:var(--btn-radius);padding:16px 48px;font-weight:600;
  font-size:16px;font-family:inherit;cursor:pointer;
  width:90%;max-width:400px;margin:0 auto;
  box-shadow:var(--shadow);transition:background .2s ease, transform .2s ease;
}
.btn-cta:hover{background:var(--primary-hover);transform:translateY(-1px);}
.btn-cta:disabled,.btn-continue:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none;}
.btn-continue-wrap{
  position:sticky;bottom:0;padding:16px 0 calc(8px + env(safe-area-inset-bottom));
  background:var(--bg);margin-top:8px;
}
.btn-continue{
  background:var(--primary);color:#fff;border:none;border-radius:var(--btn-radius);
  padding:16px;font-weight:600;font-size:16px;font-family:inherit;
  cursor:pointer;width:100%;box-shadow:var(--shadow);transition:background .2s ease;
}
.btn-continue:hover{background:var(--primary-hover);}

/* ---------- Cover ---------- */
#screen-cover{justify-content:center;align-items:center;text-align:center;flex:1;position:relative;}
#cover-bg{position:absolute;inset:calc(-64px - env(safe-area-inset-top)) -16px 0;z-index:0;overflow:hidden;}
#cover-bg img{width:100%;height:100%;object-fit:cover;}
#cover-bg::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.85);}
#screen-cover .cover-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:18px;}
.cover-title{font-size:24px;font-weight:700;color:var(--title);line-height:1.25;}
.cover-sub{font-size:15px;font-weight:400;color:var(--body);max-width:380px;}

/* ---------- Image placeholder (editor / imagens não definidas) ---------- */
.image-placeholder{
  width:100%;aspect-ratio:16/9;background:#F3F4F6;
  border:2px dashed #D1D5DB;border-radius:var(--radius);display:flex;
  flex-direction:column;align-items:center;justify-content:center;
  gap:8px;color:#9CA3AF;font-size:14px;text-align:center;padding:16px;
}
.image-placeholder span.desc{font-size:12px;color:#D1D5DB;}

/* ---------- Loading screen ---------- */
#screen-loading{justify-content:flex-start;align-items:center;text-align:center;gap:16px;}
.loading-top{font-size:18px;font-weight:600;color:var(--title);margin-top:8px;}
.loading-pct{color:var(--primary);font-weight:700;}
.loading-bar-track{width:100%;height:10px;background:var(--border);border-radius:50px;overflow:hidden;}
.loading-bar-fill{height:100%;width:0;background:var(--primary);transition:width .15s linear;}
.loading-sub{font-size:15px;color:var(--body);line-height:1.6;}
.arrows-down{display:flex;flex-direction:column;align-items:center;color:var(--primary);line-height:.7;}
.arrows-down span{font-size:26px;}
.depo-text{font-size:14px;color:var(--body);line-height:1.6;text-align:left;white-space:pre-line;background:#F9FAFB;border-radius:var(--radius);padding:14px;}

/* ---------- Result screen ---------- */
#screen-result{text-align:center;gap:14px;}
.result-headline{font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--title);}
.result-img{width:100%;border-radius:8px;margin:16px 0;}
.result-subtitle{font-size:20px;font-weight:600;color:var(--body);}
.result-text{font-size:15px;color:var(--body);line-height:1.6;}
.result-text b{color:var(--title);}
.result-highlight{font-size:16px;color:var(--title);line-height:1.6;font-weight:500;}
.result-highlight b{font-weight:700;}
.result-h2{font-size:22px;font-weight:700;color:var(--title);margin:24px 0;line-height:1.3;}
.result-h3{font-size:18px;font-weight:700;color:var(--title);}
.btn-result{
  background:var(--accent);color:#fff;border:none;font-size:16px;
  font-weight:600;border-radius:var(--radius);padding:16px 32px;width:100%;
  margin-top:24px;cursor:pointer;font-family:inherit;
  box-shadow:var(--shadow);transition:background .2s ease;
}
.btn-result:hover{background:var(--accent-hover);}

/* ---------- Form step (previsto no schema; PII só em fase futura) ---------- */
.q-form{display:flex;flex-direction:column;gap:12px;}
.q-form input{
  width:100%;padding:14px 16px;border:1px solid var(--border);border-radius:var(--radius);
  font-size:16px;font-family:inherit;background:var(--bg);color:var(--title);
}
.q-form input:focus{outline:none;border-color:var(--primary);}

/* ---------- Erro fatal (config inválido / sem quiz) ---------- */
#fatal{
  max-width:var(--maxw);margin:0 auto;padding:48px 24px;text-align:center;
  display:flex;flex-direction:column;gap:12px;color:var(--body);
}
#fatal h1{font-size:20px;color:var(--title);}
#fatal code{background:#F3F4F6;padding:2px 6px;border-radius:6px;font-size:13px;color:#B91C1C;}

/* ---------- Desktop ---------- */
@media (min-width:481px){ :root{--maxw:500px;} }
@media (min-width:769px){
  :root{--maxw:600px;}
  #app{padding-left:24px;padding-right:24px;}
  .q-title{font-size:26px;}
  .cover-title{font-size:28px;}
  .option:hover{box-shadow:0 2px 8px rgba(0,0,0,.06);}
  .result-headline{font-size:24px;}
  .result-subtitle{font-size:24px;}
  .result-h2{font-size:28px;}
}