/* ============================================================
   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: 20px var(--space-md) 108px;
  /* máscara: o conteúdo SOME por transparência ao subir além do topo (vale p/ toda tela que rola) */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20px, #000 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 20px, #000 100%); }
/* 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 {                                          /* medidas do Menu.svg: pill estreito #2e3c44 */
  position: fixed; bottom: calc(14px + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%);
  width: calc(min(440px, 100vw) - 32px); max-width: 408px;
  height: 58px;
  display: flex; align-items: center;
  padding: 0 4px;
  border-radius: 999px;
  background: #2E3C44;                                 /* sólido (cor do Menu.svg) */
  box-shadow: var(--elevation-floating);
  z-index: 40;
}
.navitem { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; height: 100%; }
/* destaque: círculo verde SÓLIDO, diâmetro = altura da barra (Menu.svg) — estica feito gota no trajeto */
.nav-blob {
  position: absolute; z-index: 0; left: 0; top: 50%; margin-top: -27px;
  width: 54px; height: 54px; border-radius: 50%;
  transform-origin: center center;
  background: #78C93D;                                 /* verde fechado (Menu.svg), sem glass/glow */
  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); }
}

/* ============================================================
   HOME v2 — tela home (ref: Tela home quiz.svg, Thiago 2026-06-22)
   ============================================================ */
.hero { position: relative; padding: 4px var(--space-md) 40px; --bar-c: #FF4848; }
/* hero FIXO e OPACO (z3): corta o santo na base; sombra interna na base = a "sombra acima da linha" */
.hero--fixed { flex: none; position: relative; z-index: 3; overflow: hidden; background: var(--surface-base); box-shadow: inset 0 -26px 24px -14px rgba(0,0,0,.55); }
.hero__top { position: relative; z-index: 6; }                     /* greet+badges sempre acima da sombra */
.hero__faltam { position: relative; z-index: 6; }                  /* pill+label acima da sombra */
.hero__greet { display: flex; flex-direction: column; padding-right: 120px; }
.hero__greet-k { font-family: var(--font-ui); font-weight: 800; font-size: 13px; letter-spacing: 5px; text-transform: uppercase; color: var(--text-muted); }
.hero__name { font-family: var(--font-ui); font-weight: 700; font-size: 44px; line-height: .9; letter-spacing: -1px; text-transform: uppercase; color: var(--text-primary); margin: 2px 0 0; }
.hero__badges { display: flex; gap: 8px; margin-top: 16px; }
.lvl-pill { font-family: var(--font-ui); font-weight: 800; font-size: 12px; padding: 5px 14px; border-radius: 999px; background: var(--surface-overlay); color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--border-soft); }
.tier-pill { font-family: var(--font-ui); font-weight: 800; font-size: 12px; padding: 5px 14px; border-radius: 999px; }

/* barra termômetro (z1, ATRÁS do santo z2): estende até sob o santo e some lá */
.hero__bar { position: relative; z-index: 1; margin-top: 16px; margin-right: 132px; }
.hero__bar-track { position: relative; height: 22px; border-radius: 11px; background: #33464F; }
.hero__bar-fill { position: absolute; left: 0; top: 0; height: 100%; min-width: 22px; border-radius: 11px; background: var(--bar-c); box-shadow: 0 0 14px 1px var(--bar-c); }
.hero__bar-grades { position: absolute; inset: 0; border-radius: 11px; overflow: hidden; pointer-events: none; }
.hero__bar-grades::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(100%/6 - 3px), rgba(19,31,36,.85) calc(100%/6 - 3px) calc(100%/6)); }
/* faltam: frase contínua "faltam Nxp para o nível N"; pill inline na sequência do texto */
.hero__faltam { position: relative; margin-top: 0; margin-right: 132px; padding-top: 18px; display: flex; flex-wrap: wrap; align-items: center; column-gap: 7px; row-gap: 3px; }
.ff-pre, .ff-post { font-family: var(--font-ui); font-weight: 800; font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--text-muted); }
.ff-post { flex-basis: 100%; }                                     /* "para o nível N" quebra pra 2ª linha */
/* apagada (default): cinza da barra vazia */
.ff-pill { position: relative; font-family: var(--font-mono); font-weight: 700; font-size: 12px; color: var(--text-secondary); background: #33464F; padding: 2px 9px; border-radius: 999px; transition: color .25s, background .25s, box-shadow .25s; }
/* linha que sobe da pill e ENCOSTA na barra — sem divisão, a cor "vaza" barra→linha→pill */
.ff-conn { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); width: 3px; height: 18px; background: #33464F; transition: background .25s, box-shadow .25s; }
/* acesa: o fill passou do marco — aprovação visual */
.hero__faltam.is-on .ff-pill { color: #fff; background: var(--bar-c); box-shadow: 0 0 11px 1px var(--bar-c); }
.hero__faltam.is-on .ff-conn { background: var(--bar-c); box-shadow: 0 0 6px var(--bar-c); }

/* santo + nome — camada acima da barra (z2), cortada pelo corpo (z5) */
.hero__saint-wrap { position: absolute; z-index: 2; top: 22px; right: -2px; display: flex; align-items: flex-start; gap: 1px; pointer-events: none; }
.hero__saint { background: none; border: 0; padding: 0; line-height: 0; cursor: pointer; pointer-events: auto; }
.hero__saint-name { display: flex; flex-direction: column; align-items: flex-start; padding-top: 40px; line-height: 1.04; }
.ssn-trat { font-family: var(--font-ui); font-weight: 400; font-size: 14px; color: var(--text-secondary); }
.ssn-nome { font-family: var(--font-ui); font-weight: 800; font-size: 15px; color: var(--text-primary); max-width: 80px; }
.ssn-dia { margin-top: 9px; font-family: var(--font-ui); font-weight: 400; font-size: 8.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted); }
.ssn-mes { font-family: var(--font-ui); font-weight: 800; font-size: 8.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--text-secondary); }

/* corpo da home — usa a máscara do .scroll-body (conteúdo some ao cruzar a linha do hero) */
.home-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; }
.home-scrim-top { display: none; }
/* scrim de baixo — blur + escurecimento atrás do menu flutuante, mais forte e mais alto */
.nav-scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 168px; z-index: 39; pointer-events: none; background: linear-gradient(to top, var(--surface-base) 18%, rgba(14,21,24,.78) 44%, rgba(14,21,24,.3) 70%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-mask-image: linear-gradient(to top, #000 38%, transparent 96%); mask-image: linear-gradient(to top, #000 38%, transparent 96%); }

/* Quest dourada */
.quest-gold { position: relative; overflow: hidden; border-radius: 18px; background: linear-gradient(135deg, #ffc60a, #ffb300); padding: 16px 18px; min-height: 116px; box-shadow: 0 4px 0 #c98a06; }
/* cluster de hóstias bagunçadas/sobrepostas (Hostia-borda) à esquerda, cortadas pela borda do card */
.quest-coins { position: absolute; left: -10px; top: -6px; bottom: -6px; width: 132px; pointer-events: none; }
.qcoin { position: absolute; animation: qcoin-float 5.5s ease-in-out infinite; }
.qcoin__i { display: block; transform: rotate(var(--r)) scale(var(--s)) translateY(var(--py,0)) rotate(var(--pr,0deg)); will-change: transform; filter: drop-shadow(0 2px 2px rgba(120,80,0,.28)); }
@keyframes qcoin-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.qcoin { animation-name: qcoin-settle, qcoin-float; animation-duration: .7s, 5.5s; animation-timing-function: cubic-bezier(.3,1.5,.5,1), ease-in-out; animation-iteration-count: 1, infinite; animation-delay: 0s, .7s; }
@keyframes qcoin-settle { 0% { transform: translateY(-14px) ; opacity: 0; } 60% { transform: translateY(3px); } 100% { transform: translateY(0); opacity: 1; } }

.quest-gold__body { position: relative; margin-left: 116px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
/* contador de dias — em cima; acende com glow ao preencher (Contador-aceso/apagado) */
.quest-dots { display: flex; gap: 7px; margin-bottom: 2px; }
.qdot { width: 10px; height: 10px; border-radius: 50%; background: #161f23; }
.qdot.now { background: #161f23; box-shadow: inset 0 0 0 2px #ffe6ae88; }
.qdot.on  { background: #ffe6ae; box-shadow: 0 0 7px 1px #ffed69, 0 0 2px #fff inset; }
.quest-gold__kicker { font-family: var(--font-ui); font-size: 14px; letter-spacing: .2px; text-transform: uppercase; color: #161F23; line-height: 1.05; }
.quest-gold__kicker .qk-1 { font-weight: 700; font-style: normal; }          /* QUEST DE — Nunito Bold */
.quest-gold__kicker .qk-2 { font-weight: 900; font-style: italic; }          /* BOAS-VINDAS — Nunito Black Italic */
.quest-gold__mission { font-family: var(--font-ui); font-weight: 700; font-size: 13.5px; line-height: 1.3; color: #FFE6AE; max-width: 200px; }
.quest-gold__btn { margin-top: 4px; font-family: var(--font-ui); font-weight: 800; font-size: 13px; color: #fff; background: #353535; border: 0; padding: 7px 18px; border-radius: 999px; cursor: pointer; box-shadow: 0 3px 0 #1a1a1a; }
.quest-gold__btn:disabled { opacity: .55; box-shadow: none; }
/* resgatada: vira ✓ no canto e o card encolhe (sem o botão) */
.quest-gold.is-done { min-height: 0; padding: 13px 18px; }
.quest-gold__check { position: absolute; top: 11px; right: 13px; z-index: 2; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.55); display: grid; place-items: center; }

/* Dois cards grandes (batalha online / baú) */
.home-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bigcard { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 8px; min-height: 122px; padding: 14px 16px; border-radius: 18px; background: var(--surface-card); border: 1px solid var(--border-soft); cursor: pointer; text-align: left; }
.bigcard__title { font-family: var(--font-ui); font-weight: 900; font-size: 26px; line-height: 1; letter-spacing: -.3px; color: var(--text-primary); text-transform: lowercase; }
.bigcard__pill { font-family: var(--font-ui); font-weight: 800; font-size: 11px; letter-spacing: .4px; text-transform: uppercase; color: #5a3d00; background: var(--action-reward); padding: 3px 10px; border-radius: 999px; }

/* Banner de Ligas — ref Ligas-banner.svg: nº gigante + seta + nome ao fundo, cor da liga */
.ligas-banner { position: relative; overflow: hidden; width: 100%; min-height: 158px; padding: 20px 22px; border-radius: 24px; background: var(--lc); box-shadow: 0 6px 0 var(--lc-d); cursor: pointer; text-align: left; }
@keyframes liga-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.lb-wm { position: absolute; right: -6px; top: 47%; transform: translateY(-50%); text-align: right; font-family: var(--font-ui); font-weight: 900; font-size: 60px; line-height: .82; letter-spacing: -2px; text-transform: uppercase; color: rgba(255,255,255,.20); white-space: pre-line; pointer-events: none; animation: liga-in .42s ease; }
.lb-fg { position: relative; z-index: 1; animation: liga-in .42s ease; }
.lb-top { display: flex; align-items: center; gap: 16px; }
.lb-num { font-family: var(--font-ui); font-weight: 900; font-size: 60px; line-height: 1; color: #fff; text-shadow: 0 4px 0 #FFBC00; letter-spacing: -2px; }
.lb-tri { flex: none; }
.lb-tri--up { width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 26px solid #78C93D; filter: drop-shadow(0 4px 0 #4A8918); }
.lb-tri--down { width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 26px solid #FF5B5B; filter: drop-shadow(0 -4px 0 #C43A3A); }
.lb-tri--same { width: 30px; height: 9px; border-radius: 5px; background: rgba(255,255,255,.85); }
.lb-sub { margin-top: 12px; font-family: var(--font-ui); font-weight: 700; font-size: 14px; line-height: 1.3; color: rgba(255,255,255,.95); max-width: 64%; }
.lb-dots { position: relative; z-index: 1; display: flex; gap: 6px; margin-top: 16px; }
.lb-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.4); transition: width .3s; }
.lb-dots i.on { background: #fff; width: 18px; border-radius: 4px; }

/* avatar de amigo (lista de amigos no perfil) */
.friend-av { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--action-info); color: #fff; font-family: var(--font-ui); font-weight: 800; font-size: 15px; }

/* app icon pulsando (loader genérico) */
.loader-icon { border-radius: 20px; animation: loader-pulse 1.5s ease-in-out infinite; }
@keyframes loader-pulse { 0%,100% { transform: scale(1); opacity: .92; } 50% { transform: scale(1.06); opacity: 1; } }

/* Santo animado — rig facial em CSS puro sobre o vetor (estilo Duolingo, sem lib) */
.santo-anim { transform-origin: 50% 100%; will-change: transform; }
.santo-anim .si-halo, .santo-anim .si-pupil, .santo-anim .si-brow, .santo-anim .si-stache, .santo-anim .si-heart { transform-box: fill-box; transform-origin: center; }
.santo-anim .si-reflexo, .santo-anim .si-sparkle, .santo-anim .si-gaze { transform-box: fill-box; transform-origin: center; }
.santo-anim .si-eyelid { transform-box: fill-box; transform-origin: center top; }
.santo-anim .si-eyelid-lower { transform-box: fill-box; transform-origin: center bottom; }
/* pálpebra e a "forma de fora" da boca sempre na cor de pele do santo (--skin, setada por
   SantoArt a partir de def.skin) — nunca fixa no hex de um santo específico, senão não dá
   pra reusar a mesma peça de olho/boca pra santos com peles diferentes. */
.santo-anim .si-eyelid, .santo-anim .si-eyelid-lower, .santo-anim .si-mouth-outer { fill: var(--skin, #f4cebd); }
/* corpo: respira / pula / balança */
.santo-idle    { animation: santo-breathe 3.6s ease-in-out infinite; }
.santo-cheer   { animation: santo-cheer 1.25s cubic-bezier(.3,1.5,.45,1) infinite; }
.santo-praying { animation: santo-pray 4.6s ease-in-out infinite; }
/* sempre: halo flutua + pisca (pálpebra de cima E de baixo, mesmo timing, se encontram no meio) ·
   reflexo do olho treme de leve · estrelinha do maravilhado se move mais forte · coração palpita
   de vez em quando */
.santo-anim .si-halo    { animation: santo-halo 3.6s ease-in-out infinite; }
.santo-anim .si-eyelid, .santo-anim .si-eyelid-lower { animation: santo-blink 5.2s infinite; }
.santo-anim .si-reflexo { animation: santo-reflexo 2.4s ease-in-out infinite; }
.santo-anim .si-sparkle { animation: santo-sparkle 1.8s ease-in-out infinite; }
.santo-anim .si-heart   { animation: santo-heartbeat 2.6s ease-in-out infinite; }
/* idle: olhar suave (pupila + reflexo se movem juntos — daí o wrapper si-gaze; o reflexo
   ainda treme por cima, os dois transforms compõem por estarem aninhados) · cheer: sobrancelha
   sobe + bigode sorri · praying: sobrancelha baixa */
.santo-idle .si-gaze     { animation: santo-look 7s ease-in-out infinite; }
.santo-cheer .si-brow    { animation: santo-brow 1.25s ease-in-out infinite; }
.santo-cheer .si-stache  { animation: santo-smile 1.25s ease-in-out infinite; }
.santo-praying .si-brow  { transform: translateY(2px); }
@keyframes santo-breathe { 0%,100% { transform: translateY(0) scale(1,1); } 50% { transform: translateY(-2px) scale(1.008,.99); } }
@keyframes santo-cheer   { 0%,100% { transform: translateY(0) scale(1,1); } 22% { transform: translateY(-13px) scale(.95,1.07); } 44% { transform: translateY(0) scale(1.07,.93); } 64% { transform: translateY(-5px) scale(.98,1.02); } 82% { transform: translateY(0) scale(1.02,.98); } }
@keyframes santo-pray    { 0%,100% { transform: rotate(-1.3deg); } 50% { transform: rotate(1.3deg); } }
@keyframes santo-halo    { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes santo-blink   { 0%,93%,100% { transform: scaleY(1); } 96.5% { transform: scaleY(2.6); } }
@keyframes santo-look    { 0%,100% { transform: translateX(0); } 30% { transform: translateX(-2.5px); } 65% { transform: translateX(2.5px); } }
@keyframes santo-brow    { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-4px); } }
@keyframes santo-smile   { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-2.5px); } }
@keyframes santo-reflexo { 0%,100% { transform: translate(0,0); } 20% { transform: translate(.4px,-.3px); } 45% { transform: translate(-.3px,.4px); } 70% { transform: translate(.3px,.3px); } 90% { transform: translate(-.2px,-.2px); } }
@keyframes santo-sparkle { 0%,100% { transform: translate(0,0) scale(1); opacity: 1; } 30% { transform: translate(1.2px,-1px) scale(1.25); opacity: .85; } 55% { transform: translate(-1px,1.2px) scale(.8); opacity: 1; } 80% { transform: translate(.8px,.6px) scale(1.1); opacity: .9; } }
@keyframes santo-heartbeat { 0%,70%,100% { transform: scale(1); } 75% { transform: scale(1.18); } 80% { transform: scale(1); } 85% { transform: scale(1.12); } 90% { transform: scale(1); } }

/* Hub ID — gate de login (capa) + pill na topbar */
.hubid-cta { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; color: var(--text-secondary); font-family: var(--font-ui); font-weight: 700; font-size: 14px; cursor: pointer; padding: 8px; }
.hubid-cta:hover { color: var(--text-primary); }
.gate { max-width: 360px; margin: 0 auto; }
.gate__logo { border-radius: 26px; box-shadow: 0 14px 44px rgba(0,0,0,.45); }
.wordmark-img img { width: 190px; max-width: 64%; display: block; margin: 0 auto; }
.gate__pill { display: inline-flex; justify-content: center; min-height: 34px; }
.hub-pill { display: inline-flex; align-items: center; }

/* respeitar quem pede menos movimento — V&V #16: cobre TODAS as @keyframes/transitions, não só as telas novas */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}