/* ============================================================
   Quiz Católico — Componentes & Telas
   Estética Duolingo (70-80%) sobre Night Vision dark-first.
   ============================================================ */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* sem barra de rolagem aparente — as telas rolam, mas a barra não aparece */
.app-frame, .app-frame * { scrollbar-width: none; -ms-overflow-style: none; }
.app-frame ::-webkit-scrollbar, .app-frame::-webkit-scrollbar { width: 0; height: 0; display: none; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--surface-deep);
  color: var(--text-primary);
  font-family: var(--font-ui);
  overscroll-behavior: none;
  overflow: hidden;                 /* a página NÃO rola; o scroll vive no .scroll-body interno */
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img { display: block; }

/* ---- App shell: moldura mobile centrada no desktop ---- */
#root { height: 100%; }
.app-frame {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
  height: 100vh;
  height: 100dvh;                   /* altura EXATA da viewport — não cresce, não rola a página */
  background: var(--surface-base);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (min-width: 460px) {
  body { background: #060B0D; padding: 0; }
  .app-frame { border-left: 1px solid var(--border-subtle); border-right: 1px solid var(--border-subtle); }
}

.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.screen-pad { padding: var(--space-md); }
.scroll-body { flex: 1; overflow-y: auto; padding: var(--space-md); padding-bottom: 108px; }
/* impede os filhos do scroll (flex-column) de encolherem sob altura fixa — eles devem rolar, não comprimir */
.scroll-body > * { flex-shrink: 0; }

/* ===================== StatusBar (topo do app) ===================== */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  gap: var(--space-sm);
  background: var(--surface-base);
  position: sticky; top: 0; z-index: 20;
}
.topbar-stats { display: flex; align-items: center; gap: var(--space-md); }
.stat-pill { display: flex; align-items: center; gap: 6px; }
.stat-pill .ico { width: 22px; height: 22px; }

/* ===================== Botão ===================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  padding: 0 var(--space-lg);
  height: 56px;
  border-radius: var(--radius-md);
  font-family: var(--font-ui); font-weight: 700; font-size: 16px; letter-spacing: 0.4px;
  text-transform: uppercase;
  transition: transform .06s ease, box-shadow .06s ease, filter .15s ease;
  user-select: none;
  position: relative;
}
.btn:active { transform: translateY(2px); }
.btn--full { width: 100%; }
.btn--sm { height: 44px; font-size: 14px; }
.btn--lg { height: 64px; font-size: 17px; }

.btn--primary { background: var(--action-positive); color: var(--text-on-positive); box-shadow: var(--lift-button); }
.btn--primary:active { box-shadow: var(--lift-button-pressed); }

.btn--reward { background: var(--action-reward); color: var(--text-on-accent); box-shadow: 0 4px 0 0 #C99A00; }
.btn--reward:active { box-shadow: 0 1px 0 0 #C99A00; }

.btn--danger { background: var(--feedback-error); color: #fff; box-shadow: 0 4px 0 0 #C42E2E; }
.btn--danger:active { box-shadow: 0 1px 0 0 #C42E2E; }

.btn--info { background: var(--action-info); color: #fff; box-shadow: 0 4px 0 0 #1289C4; }
.btn--info:active { box-shadow: 0 1px 0 0 #1289C4; }

.btn--secondary { background: var(--surface-card); color: var(--text-primary); border: 2px solid var(--border-subtle); box-shadow: 0 4px 0 0 var(--surface-deep); }
.btn--secondary:active { box-shadow: 0 1px 0 0 var(--surface-deep); }

.btn--outline { background: transparent; color: var(--text-primary); border: 2px solid var(--border-strong); }
.btn--ghost { background: transparent; color: var(--action-info); text-transform: none; font-weight: 700; }

.btn:disabled, .btn[aria-disabled="true"] { opacity: var(--opacity-disabled); pointer-events: none; box-shadow: none; }

/* ===================== Cards ===================== */
.card {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--elevation-card);
  border: 1px solid var(--border-subtle);
}
.card--raised { background: var(--surface-raised); }
.card--flat { box-shadow: none; }

/* Hero do Santo do Mês */
.hero-saint {
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-sm);
  text-align: center;
  background: radial-gradient(120% 100% at 50% 0%, rgba(255,200,0,0.18), transparent 60%), var(--surface-raised);
  border: 1px solid var(--border-subtle);
  position: relative; overflow: hidden;
}

/* ===================== SaintSlot (placeholder doc. — monograma STIX) ===================== */
.saint-slot {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  background: var(--surface-raised);
  color: var(--action-reward);
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  flex: none;
}
.saint-slot--halo { box-shadow: var(--glow-halo); }
.saint-slot.s48  { width: 48px;  height: 48px;  font-size: 22px; }
.saint-slot.s80  { width: 80px;  height: 80px;  font-size: 34px; }
.saint-slot.s120 { width: 120px; height: 120px; font-size: 52px; }
.saint-slot.s180 { width: 180px; height: 180px; font-size: 78px; }
.saint-slot .ring {
  position: absolute; inset: 0; border-radius: var(--radius-full);
  border: 2px solid rgba(255,200,0,0.35);
}
.saint-slot--praying { animation: breathe 3.2s ease-in-out infinite; }
.saint-slot--cheer   { animation: pop 0.5s cubic-bezier(.2,1.4,.4,1); }
@keyframes breathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }
@keyframes pop { 0%{transform:scale(0.7)} 70%{transform:scale(1.1)} 100%{transform:scale(1)} }

/* ===================== Hóstia (moeda) — círculo branco + cruz cardinal (D-002) ===================== */
.hostia { display: inline-block; }

/* ===================== Categoria card ===================== */
.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.cat-card {
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  min-height: 116px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 4px 0 0 var(--surface-deep);
  transition: transform .08s ease;
  text-align: left;
}
.cat-card:active { transform: translateY(2px); box-shadow: 0 1px 0 0 var(--surface-deep); }
.cat-card .cat-dot { width: 40px; height: 40px; border-radius: var(--radius-full); display:flex; align-items:center; justify-content:center; }
.cat-card .cat-name { font-weight: 800; font-size: 16px; }
.cat-card .cat-sub { color: var(--text-muted); font-size: 12px; }
.cat-card--wide { grid-column: 1 / -1; min-height: auto; flex-direction: row; align-items: center; gap: var(--space-md); }

/* ===================== BottomNav ===================== */
/* BottomNav — pílula FIXA na viewport (estilo barra nova do Instagram) */
.bottomnav {
  position: fixed; bottom: calc(14px + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%);
  width: calc(min(440px, 100vw) - 32px); max-width: 408px;
  display: flex; align-items: center; gap: 4px;
  padding: 5px;
  border-radius: var(--radius-full);                 /* pílula = sempre meia-altura */
  background: var(--surface-raised);                  /* sólido (cor do app), sem vidro/blur */
  border: 1px solid var(--border-subtle);
  box-shadow: var(--elevation-floating);
  z-index: 40;
}
.navitem { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; padding: 8px 0; border-radius: var(--radius-full); color: var(--text-muted); transition: color .35s ease; }
.navitem.active { color: var(--action-positive); }
.navitem .ico { width: 26px; height: 26px; }
/* destaque líquido (liquid glass) — UM elemento: círculo em repouso, cápsula esticada no trajeto */
.nav-blob {
  position: absolute; z-index: 0; left: 0; top: 50%; margin-top: -20px;
  width: 40px; height: 40px; border-radius: var(--radius-full);
  transform-origin: center center;
  background: rgba(88, 204, 2, 0.18);                 /* verde do app (sólido), sem glass/glow */
  box-shadow: inset 0 0 0 1.5px rgba(88, 204, 2, 0.55);
  will-change: transform; pointer-events: none;
  transition: opacity .2s ease;
}

/* ===================== Match / Pergunta ===================== */
.match-bg { flex: 1; display: flex; flex-direction: column; }
.q-header { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); }
.q-progress { display: flex; gap: 6px; flex: 1; }
.q-progress .seg { height: 8px; flex: 1; border-radius: var(--radius-full); background: rgba(255,255,255,0.15); }
.q-progress .seg.done { background: var(--action-positive); }
.q-progress .seg.wrong { background: var(--feedback-error); }

.timerbar { height: 10px; border-radius: var(--radius-full); background: rgba(255,255,255,0.12); margin: 0 var(--space-md) var(--space-sm); overflow: hidden; }
.timerbar .fill { height: 100%; width: 100%; transform-origin: left center; transform: scaleX(0); background: var(--action-info); transition: transform var(--t-default) var(--ease-standard); border-radius: var(--radius-full); }
.timerbar .fill.warn { background: var(--action-streak); }
.timerbar .fill.crit { background: var(--feedback-error); }

.question-card {
  margin: var(--space-md);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--elevation-card);
  min-height: 132px; display: flex; align-items: center;
}
.options { display: flex; flex-direction: column; gap: var(--space-sm); padding: 0 var(--space-md) var(--space-md); }
.option {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  border: 2px solid var(--border-subtle);
  box-shadow: 0 3px 0 0 var(--surface-deep);
  text-align: left; width: 100%;
  transition: transform .06s ease, background .15s ease, border-color .15s ease;
  font-size: 16px; font-weight: 600; color: var(--text-primary);
}
.option:active { transform: translateY(2px); box-shadow: 0 0 0 0 var(--surface-deep); }
.option .letter {
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 16px;
  background: var(--surface-raised); color: var(--text-secondary); flex: none;
}
/* durante a partida NÃO há feedback de acerto/erro (doc 11.1): só seleção + dim */
.option.selected { border-color: var(--action-info); background: rgba(28,176,246,0.14); animation: pickpulse .2s ease; }
.option.selected .letter { background: var(--action-info); color: #fff; }
.option.dim { opacity: var(--opacity-dim); }
.option:disabled { pointer-events: none; }
@keyframes pickpulse { 0%{transform:scale(1)} 50%{transform:scale(1.02)} 100%{transform:scale(1)} }

/* gabarito (só no quadro detalhado / premium) */
.option.correct { background: rgba(88,204,2,0.18); border-color: var(--feedback-success); }
.option.correct .letter { background: var(--feedback-success); color: #0E1518; }
.option.wrong { background: rgba(255,75,75,0.16); border-color: var(--feedback-error); }
.option.wrong .letter { background: var(--feedback-error); color: #fff; }

/* segmentos de progresso neutros (respondida vs pendente — sem revelar acerto) */
.q-progress .seg.ans { background: var(--text-secondary); opacity: .85; }

/* cronômetro circular */
.timer-ring { position: relative; width: 72px; height: 72px; margin: var(--space-xs) auto var(--space-sm); }
.timer-ring svg { transform: rotate(-90deg); }
.timer-ring .num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700; font-size: 24px; font-variant-numeric: tabular-nums; }

/* explicação após responder */
.explain {
  margin: 0 var(--space-md) var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  border-left: 4px solid var(--action-info);
}
.explain.ok { border-left-color: var(--feedback-success); }
.explain.no { border-left-color: var(--feedback-error); }

/* ===================== VS ===================== */
.vs-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-lg); padding: var(--space-lg); }
.vs-row { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--space-sm); }
.vs-player { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vs-mark { font-family: var(--font-display); font-style: italic; font-size: 48px; color: var(--action-reward); }

/* ===================== Result ===================== */
.result-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-md); padding: var(--space-lg); text-align: center; }
.scoreline { font-family: var(--font-mono); font-weight: 700; font-size: 44px; letter-spacing: 2px; }
.reward-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--radius-full); background: var(--surface-raised); font-weight: 700; }

/* ===================== Diversos ===================== */
.row { display: flex; align-items: center; gap: var(--space-sm); }
.col { display: flex; flex-direction: column; }
.gap-sm { gap: var(--space-sm); } .gap-md { gap: var(--space-md); } .gap-lg { gap: var(--space-lg); }
.center { align-items: center; } .between { justify-content: space-between; }
.grow { flex: 1; } .wrap { flex-wrap: wrap; }
.muted { color: var(--text-muted); } .secondary { color: var(--text-secondary); }
.mt-sm{margin-top:var(--space-sm)} .mt-md{margin-top:var(--space-md)} .mt-lg{margin-top:var(--space-lg)} .mt-xl{margin-top:var(--space-xl)}
.mb-sm{margin-bottom:var(--space-sm)} .mb-md{margin-bottom:var(--space-md)} .mb-lg{margin-bottom:var(--space-lg)}
.tcenter { text-align: center; }
.divider { height: 1px; background: var(--border-subtle); margin: var(--space-md) 0; }
.tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--radius-full); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; }
.list-item { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) 0; }
.rank-pos { width: 28px; font-family: var(--font-mono); font-weight: 700; color: var(--text-muted); text-align: center; }

/* fade / slide entrances */
.fade-in { animation: fadeIn .35s ease both; }
.slide-up { animation: slideUp .4s cubic-bezier(.2,.8,.2,1) both; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{opacity:0; transform: translateY(16px)} to{opacity:1; transform:none} }

/* loader pulse dots */
.dots { display: inline-flex; gap: 6px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--action-reward); animation: blink 1.2s infinite both; }
.dots i:nth-child(2){ animation-delay: .2s } .dots i:nth-child(3){ animation-delay: .4s }
@keyframes blink { 0%,80%,100%{opacity:.25} 40%{opacity:1} }

/* confetti católico — partícula é um SVG (hóstia/halo/cruz/estrela/palma/lis) */
.confetti { position: absolute; top: -16px; line-height: 0; animation: fall linear forwards; z-index: 5; will-change: transform, opacity; }
@keyframes fall { to { transform: translateY(118vh) rotate(560deg); opacity: 0; } }

/* overlay/sheet */
.overlay { position: fixed; inset: 0; background: rgba(14,21,24,0.6); display: flex; align-items: flex-end; justify-content: center; z-index: 50; }
.sheet { width: 100%; max-width: 440px; background: var(--surface-raised); border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: var(--space-lg); box-shadow: var(--elevation-sheet); animation: slideUp .3s ease both; }

/* tooltips de 1ª vez (doc §5.3) — bolha ancorada, não-bloqueante */
.tip { position: absolute; z-index: 55; max-width: 250px; transform: translateX(-50%); background: var(--surface-overlay); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 12px 14px; box-shadow: var(--elevation-floating); pointer-events: auto; animation: tipIn var(--t-fast) var(--ease-bounce-out); }
.tip-arrow { position: absolute; top: -6px; width: 12px; height: 12px; background: var(--surface-overlay); border-left: 1px solid var(--border-strong); border-top: 1px solid var(--border-strong); transform: translateX(-50%) rotate(45deg); }
.tip-ok { margin-top: 10px; background: var(--action-positive); color: var(--text-on-positive); font-weight: 700; font-size: 13px; padding: 6px 16px; border-radius: var(--radius-full); }
@keyframes tipIn { from { opacity: 0; transform: translateX(-50%) translateY(-6px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* wordmark tipográfico (placeholder — logo oficial entra como <img> quando o SVG existir) */
.wordmark { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 34px; color: var(--text-primary); line-height: 1; }
.wordmark b { font-family: var(--font-ui); font-style: normal; font-weight: 800; color: var(--action-positive); }

/* ============================================================
   POLISH PASS (estudo UI 2026-06-18) — ícones Phosphor + transições + craft
   ============================================================ */

/* transição entre telas — slide lateral rápido, pro lado que o ícone corre */
.screen-trans { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.screen-trans.slide-right { animation: slideR .2s cubic-bezier(.22, .7, .2, 1); }
.screen-trans.slide-left { animation: slideL .2s cubic-bezier(.22, .7, .2, 1); }
@keyframes slideR { from { opacity: .35; transform: translateX(48px); } to { opacity: 1; transform: none; } }
@keyframes slideL { from { opacity: .35; transform: translateX(-48px); } to { opacity: 1; transform: none; } }

/* QuestionOption v2 — alvo de toque maior + lift 3D consistente com o Button */
.option { min-height: 62px; border-radius: var(--radius-md); box-shadow: 0 4px 0 0 var(--surface-deep); transition: transform .07s ease, background .15s ease, border-color .15s ease, box-shadow .07s ease; }
.option:active { transform: translateY(3px); box-shadow: 0 1px 0 0 var(--surface-deep); }
.option .letter { width: 36px; height: 36px; border-radius: var(--radius-md); }
.option.selected { border-bottom-color: #1289C4; }

/* ícone Phosphor alinhado verticalmente */
i[class^="ph-"], i[class*=" ph-"] { vertical-align: middle; }

/* feedback de toque nos cards de categoria/acesso (desktop hover + mobile press) */
@media (hover: hover) {
  .cat-card:hover, .card[onclick], .navitem:hover { filter: brightness(1.06); }
  .btn:hover { filter: brightness(1.04); }
}

/* respeitar quem pede menos movimento */
@media (prefers-reduced-motion: reduce) {
  .screen-trans, .fade-in, .slide-up, .saint-slot--praying, .saint-slot--cheer, .confetti, .dots i { animation: none !important; }
  * { transition-duration: .01ms !important; }
}