/* Brotinhos da Fé — estilos da interface.
   Layout: coluna única de app (máx. 560px) com barra de status no topo e navegação fixa embaixo;
   a lição ocupa a tela inteira (sem navegação). Paleta e fontes do MVP.
   Ordem do arquivo: 1. variáveis · 2. base · 3. componentes · 4. telas · 5. utilitários · 6. media queries.
   Regra: raio, tamanho de texto e espaçamento sempre por variável. Exceções ficam comentadas
   (desenhos em SVG, emoji usados como ilustração e medidas de jogo que dependem do tabuleiro).
   Ajustes finos de até 3px (bordas, setas de balão, folgas de 2px) não entram na escala. */

/* ========== 1. Variáveis ========== */
:root {
  /* cores: base quente das artes do devocional (cartão creme, título azul-marinho). Ver docs/IDENTIDADE-VISUAL.md */
  --bg: #FFF7E8; --surface: #FFFDF7; --ink: #14245C; --muted: #565F82; --line: #EADFC8;
  --sun: #FFB627; --sun-deep: #C98A0C; --on-sun: #14245C; --leaf: #127A45; --leaf-deep: #0C5A32; --on-leaf: #FFFFFF;
  --sky: #2F6FE0; --sky-deep: #1F4FA8; --on-sky: #FFFFFF; --coral: #E5533F;
  --soft-sun: #FFEFC4; --soft-leaf: #DDF3E7; --soft-coral: #FDE4E0; --soft-sky: #E3EDFF;
  --flame: #FF8A1F; --on-flame: #14245C; --water: #2AA7E0; --on-water: #14245C;
  /* cores de texto com contraste AA sobre --bg e --surface */
  --link: #2257C2; --coral-text: #B63A28; --flame-text: #A84C08; --water-text: #0A6894; --gold-text: #845A00; --tag-text: #0C5A32;
  /* as 6 seções das artes: 1 história de hoje · 2 história bíblica · 3 como se conecta · 4 o que aprendemos · 5 vamos orar · 6 conversar em família.
     --sec-N é a cor viva (enfeite, borda, ícone); --sec-N-deep leva texto branco (faixa, botão); --sec-N-text é texto colorido sobre o cartão. */
  --sec-1: #FD5E4A; --sec-2: #22BCFC; --sec-3: #FE6A0C; --sec-4: #18D572; --sec-5: #FC56BC; --sec-6: #A97BFD;
  --sec-1-deep: #C8321F; --sec-2-deep: #0A6FB0; --sec-3-deep: #B04C08; --sec-4-deep: #127A45; --sec-5-deep: #B8237F; --sec-6-deep: #7048C8;
  --sec-1-text: #C8321F; --sec-2-text: #0A6FB0; --sec-3-text: #B04C08; --sec-4-text: #127A45; --sec-5-text: #B8237F; --sec-6-text: #7048C8;
  --on-sec: #FFFFFF;
  /* azul-noite do rodapé das artes: faixa e moldura que conversam com a imagem */
  --noite: #0B2A66; --on-noite: #FFFFFF;
  /* fontes */
  --display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  /* espaço: 4 · 8 · 12 · 16 · 24 · 32 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  /* raio: pequeno (campos, etiquetas), médio (botões, linhas), grande (cartões, telas) */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px;
  /* texto: 12 · 15 · 17 (corpo) · 22 (h2) · 30 (h1) */
  --text-xs: .75rem; --text-sm: .9375rem; --text-md: 1.0625rem; --text-lg: 1.375rem; --text-xl: 1.875rem;
  /* emoji e ícones usados como ilustração (não são texto corrido) */
  --icon-sm: 1.5rem; --icon-md: 2rem; --icon-lg: 3rem; --icon-xl: 4.5rem; --icon-2xl: 6rem;
  /* camadas */
  --z-nav: 10; --z-foot: 12; --z-overlay: 30; --z-toast: 35; --z-confetti: 40; --z-captcha: 50;
  --nav-h: 68px;
  /* superfícies (seção 3): destaque (1 por tela), card (bloco que se usa) e lista simples (secundário) */
  --surface-destaque: var(--soft-sun);
  --borda: 2px solid var(--line);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B1B45; --surface: #15295A; --ink: #EEF3FF; --muted: #AEBBDB; --line: #2A4380;
    --sun: #FFC24D; --sun-deep: #B98316; --on-sun: #14245C; --leaf: #4CC98D; --leaf-deep: #2E9566; --on-leaf: #0F1730;
    --sky: #7DAEFF; --sky-deep: #4A78C9; --on-sky: #0F1730; --coral: #FF8A78;
    --soft-sun: #3A3320; --soft-leaf: #183A2C; --soft-coral: #47231F; --soft-sky: #1D2C55;
    --flame: #FFA24D; --on-flame: #0F1730; --water: #5CC4F0; --on-water: #0F1730;
    --link: #7DAEFF; --coral-text: #FF8A78; --flame-text: #FFA24D; --water-text: #5CC4F0; --gold-text: #FFC24D; --tag-text: #4CC98D;
    --sec-1-text: #FF8A78; --sec-2-text: #5CC9FF; --sec-3-text: #FFA24D; --sec-4-text: #4CD98A; --sec-5-text: #FF8AD0; --sec-6-text: #C2A3FF;
    --noite: #071338;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0B1B45; --surface: #15295A; --ink: #EEF3FF; --muted: #AEBBDB; --line: #2A4380;
  --sun: #FFC24D; --sun-deep: #B98316; --on-sun: #14245C; --leaf: #4CC98D; --leaf-deep: #2E9566; --on-leaf: #0F1730;
  --sky: #7DAEFF; --sky-deep: #4A78C9; --on-sky: #0F1730; --coral: #FF8A78;
  --soft-sun: #3A3320; --soft-leaf: #183A2C; --soft-coral: #47231F; --soft-sky: #1D2C55;
  --flame: #FFA24D; --on-flame: #0F1730; --water: #5CC4F0; --on-water: #0F1730;
  --link: #7DAEFF; --coral-text: #FF8A78; --flame-text: #FFA24D; --water-text: #5CC4F0; --gold-text: #FFC24D; --tag-text: #4CC98D;
  --sec-1-text: #FF8A78; --sec-2-text: #5CC9FF; --sec-3-text: #FFA24D; --sec-4-text: #4CD98A; --sec-5-text: #FF8AD0; --sec-6-text: #C2A3FF;
  --noite: #071338;
  color-scheme: dark;
}

/* ========== 2. Base ========== */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: var(--text-md); line-height: 1.5;
  padding-left: max(var(--sp-4), env(safe-area-inset-left, 0px)); padding-right: max(var(--sp-4), env(safe-area-inset-right, 0px));
  padding-block: var(--sp-3) calc(var(--nav-h) + var(--sp-5) + env(safe-area-inset-bottom, 0px));
}
body.lesson-mode { padding-block: var(--sp-2) calc(160px + env(safe-area-inset-bottom, 0px)); /* 160px: altura do rodapé fixo da lição */ }
/* casca: HUD + tela, uma grade só */
.casca { max-width: 560px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
#view { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); min-width: 0; }
h1, h2, h3 { font-family: var(--display); line-height: 1.15; margin: 0; text-wrap: balance; }
h1 { font-size: var(--text-xl); font-weight: 800; } h2 { font-size: var(--text-lg); font-weight: 800; } h3 { font-size: var(--text-md); font-weight: 600; }
p { margin: 0; }
button { font-family: var(--body); color: inherit; }
button:focus-visible, input:focus-visible, a:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
button:disabled { cursor: not-allowed; }
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--sp-4); top: var(--sp-2); z-index: var(--z-captcha); background: var(--surface); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); }
.storage-warning { background: var(--soft-sun); border: 2px solid var(--sun); border-radius: var(--r-sm); padding: var(--sp-3); max-width: 560px; margin: 0 auto var(--sp-3); }

/* ========== 3. Componentes ========== */
/* botões "gordinhos" com sombra embaixo, que afundam ao tocar */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); border: 0; border-radius: var(--r-md); padding: var(--sp-3) var(--sp-5); min-height: 52px;
  font: 800 var(--text-md) var(--body); letter-spacing: .02em; cursor: pointer; transition: transform .08s, box-shadow .08s; }
.btn:active:not(:disabled) { transform: translateY(3px); }
.btn-sun { background: var(--sun); color: var(--on-sun); box-shadow: 0 4px 0 var(--sun-deep); }
.btn-leaf { background: var(--leaf); color: var(--on-leaf); box-shadow: 0 4px 0 var(--leaf-deep); }
.btn-ghost { background: var(--surface); color: var(--ink); border: var(--borda); box-shadow: 0 3px 0 var(--line); }
.btn:disabled { background: var(--line); color: var(--muted); box-shadow: none; }
.btn-block { width: 100%; }
.link { background: none; border: 0; color: var(--link); font: 700 var(--text-md) var(--body); cursor: pointer; padding: var(--sp-2) 0; min-height: 44px; }
.hold { position: relative; overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; }
.trava-conta > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--link); font-weight: 700; }
.trava-conta form { display: grid; gap: var(--sp-2); }
.trava-conta input { font: var(--text-md) var(--body); padding: var(--sp-3); border-radius: var(--r-sm); border: var(--borda); background: var(--surface); color: var(--ink); }
.hold i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--soft-leaf); z-index: -1; }

/* superfícies: .card (= card), .surface-destaque e .surface-lista */
.card { background: var(--surface); border: var(--borda); border-radius: var(--r-lg); padding: var(--sp-4); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); min-width: 0; }
.surface-destaque { background: var(--surface-destaque); border-radius: var(--r-lg); padding: var(--sp-4); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); min-width: 0; }
.surface-lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); min-width: 0; }
.surface-lista > * + * { border-top: 1px solid var(--line); padding-top: var(--sp-2); }
.hero { background: var(--surface-destaque); border-color: transparent; }

/* cartão de seção, igual aos cartões das artes do devocional: faixa colorida com ícone em círculo branco e título em caixa alta.
   .sec-N escolhe a cor (1 história de hoje · 2 Bíblia · 3 conecta · 4 aprendemos · 5 orar · 6 família); ver docs/IDENTIDADE-VISUAL.md */
.sec-1 { --sc: var(--sec-1); --sc-deep: var(--sec-1-deep); --sc-text: var(--sec-1-text); }
.sec-2 { --sc: var(--sec-2); --sc-deep: var(--sec-2-deep); --sc-text: var(--sec-2-text); }
.sec-3 { --sc: var(--sec-3); --sc-deep: var(--sec-3-deep); --sc-text: var(--sec-3-text); }
.sec-4 { --sc: var(--sec-4); --sc-deep: var(--sec-4-deep); --sc-text: var(--sec-4-text); }
.sec-5 { --sc: var(--sec-5); --sc-deep: var(--sec-5-deep); --sc-text: var(--sec-5-text); }
.sec-6 { --sc: var(--sec-6); --sc-deep: var(--sec-6-deep); --sc-text: var(--sec-6-text); }
.card.sec { background: var(--surface); border: 2px solid var(--sc); padding-top: 0; overflow: hidden; box-shadow: 0 4px 0 var(--sc); }
.sec-faixa { display: flex; align-items: center; gap: var(--sp-2); margin: 0 calc(-1 * var(--sp-4)); padding: var(--sp-2) var(--sp-4); background: var(--sc-deep); color: var(--on-sec);
  font: 800 var(--text-sm) var(--display); letter-spacing: .04em; text-transform: uppercase; }
.sec-ic { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: #FFFFFF; font-size: var(--text-md); line-height: 1; /* exceção: círculo branco das artes, igual nos dois temas */ }
/* fora de um .sec-N, cai no verde da seção 4 (texto branco continua AA) */
.btn-sec { background: var(--sc-deep, var(--sec-4-deep)); color: var(--on-sec); box-shadow: 0 4px 0 rgba(0,0,0,.3); box-shadow: 0 4px 0 color-mix(in srgb, var(--sc-deep, var(--sec-4-deep)) 65%, #000); }

/* textos de apoio */
.muted { color: var(--muted); }
.help { color: var(--muted); font-size: var(--text-sm); }
.eyebrow { font-weight: 700; font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tag { font-size: var(--text-xs); font-weight: 700; background: var(--soft-leaf); color: var(--tag-text); padding: 2px var(--sp-2); border-radius: var(--r-pill); }
.tag-new { justify-self: start; font: 800 var(--text-xs) var(--body); letter-spacing: .06em; color: var(--link); background: var(--soft-sky); padding: 3px var(--sp-3); border-radius: var(--r-pill); }
.tag-redo { color: var(--coral-text); background: var(--soft-coral); }

/* formulários */
.field { display: grid; gap: var(--sp-2); } .field label { font-weight: 700; font-size: var(--text-sm); }
.field input { font: var(--text-md) var(--body); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); border: var(--borda); background: var(--surface); color: var(--ink); width: 100%; }
.seg { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.seg button { border: var(--borda); background: var(--surface); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); font-weight: 700; cursor: pointer; min-height: 44px; }
.seg button[aria-pressed="true"] { border-color: var(--leaf); background: var(--soft-leaf); }

/* barra de status (HUD) */
.hud { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.brand { display: flex; align-items: center; gap: var(--sp-2); font: 800 var(--text-lg) var(--display); }
.brand svg { width: 30px; height: 30px; }
.stats { display: flex; gap: var(--sp-2); }
.stat { display: inline-flex; align-items: center; gap: var(--sp-1); white-space: nowrap; flex: none; font: 800 var(--text-md) var(--display); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); background: var(--surface); border: var(--borda); font-variant-numeric: tabular-nums; }
.stat.flame.on { color: var(--flame-text); border-color: var(--flame); }
.stat.flame:not(.on) { filter: grayscale(1); opacity: .75; }
.stat.water { color: var(--water-text); }
/* botão da área dos pais (no lugar da antiga aba) */
.hud-pais { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 44px; padding: var(--sp-1) var(--sp-3); border: var(--borda); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font: 700 var(--text-sm) var(--body); cursor: pointer; }
.hud-pais svg { width: 18px; height: 18px; }
.hud-pais[aria-current="page"] { border-color: var(--sky); background: var(--soft-sky); }
.stats { align-items: center; }

/* navegação de baixo */
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav); background: var(--surface); border-top: var(--borda);
  padding: var(--sp-2) max(var(--sp-2), env(safe-area-inset-right, 0px)) calc(var(--sp-2) + env(safe-area-inset-bottom, 0px)) max(var(--sp-2), env(safe-area-inset-left, 0px)); }
.bottom-nav .in { max-width: 560px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-1); }
.bottom-nav button { border: 2px solid transparent; background: none; border-radius: var(--r-md); padding: var(--sp-1) 2px; display: grid; justify-items: center; align-content: center; cursor: pointer; font: 700 var(--text-xs) var(--body); color: var(--muted); min-height: 52px; white-space: nowrap; }
.bottom-nav button svg, .hud-pais svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bottom-nav button svg { margin-bottom: 2px; }
.bottom-nav button[aria-current="page"] svg { stroke-width: 2.4; }
.bottom-nav button[aria-current="page"] { border-color: var(--sky); background: var(--soft-sky); color: var(--ink); }
body.lesson-mode .bottom-nav, body.lesson-mode .hud { display: none; }

/* Nuvem falando */
.nuvem { display: flex; align-items: flex-end; gap: var(--sp-2); }
.nuvem svg { width: 74px; height: 64px; flex-shrink: 0; }
.bubble { position: relative; background: var(--surface); border: var(--borda); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); font-weight: 700; font-size: var(--text-sm); min-width: 0; }
.bubble::before { content: ""; position: absolute; left: -9px; bottom: 14px; border: 8px solid transparent; border-right-color: var(--line); border-left: 0; }
.bounce { animation: bounce 1.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* barras de progresso */
.bar { height: 14px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; flex: 1; }
.bar > i { display: block; height: 100%; background: var(--leaf); border-radius: inherit; transition: width .5s; }

/* toast e sobreposições */
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h) + var(--sp-5) + env(safe-area-inset-bottom, 0px)); z-index: var(--z-toast); background: var(--ink); color: var(--bg);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); font-weight: 700; max-width: calc(100% - var(--sp-6)); text-align: center; }
.overlay { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--bg); display: grid; place-items: center; overflow-y: auto;
  padding: max(var(--sp-4), env(safe-area-inset-top, 0px)) max(var(--sp-4), env(safe-area-inset-right, 0px)) max(var(--sp-4), env(safe-area-inset-bottom, 0px)) max(var(--sp-4), env(safe-area-inset-left, 0px)); }
.overlay.dim { background: rgba(15,23,48,.6); }
.sheet { width: 100%; max-width: 420px; background: var(--surface); border-radius: var(--r-lg); padding: var(--sp-5); display: grid; gap: var(--sp-3); }
.captcha-caixa:not([hidden]) { position: fixed; inset: auto var(--sp-4) var(--sp-5) var(--sp-4); z-index: var(--z-captcha); display: flex; justify-content: center; padding: var(--sp-3); background: var(--surface); border-radius: var(--r-md); box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.confetti { position: fixed; top: -20px; width: 10px; height: 14px; border-radius: 3px; /* exceção: papel picado */ z-index: var(--z-confetti); animation: fall 1.8s linear forwards; pointer-events: none; }
@keyframes fall { to { transform: translateY(105vh) rotate(540deg); } }

/* ========== 4. Telas ========== */

/* --- Entrada (primeira abertura) --- */
.entrada-mode .bottom-nav, .entrada-mode #hud { display: none; }
.entrada-mode #view { display: grid; align-content: center; min-height: calc(100dvh - var(--sp-5)); }
.entrada { overflow-wrap: anywhere; }
.entrada form { display: grid; gap: var(--sp-4); }
.entrada progress { width: 100%; min-width: 0; accent-color: var(--leaf-deep); }
.entrada button { min-height: 44px; }
.entrada .lesson-top .btn { flex: none; white-space: nowrap; overflow-wrap: normal; }
.entrada #entrada-voltar:disabled { display: none; }
.entrada .nuvem { background: var(--soft-sky); border-radius: var(--r-lg); padding: var(--sp-3); }
.entrada-opcoes { border: 0; margin: 0; padding: 0; display: grid; gap: var(--sp-2); min-width: 0; }
.entrada-opcoes legend { margin-bottom: var(--sp-2); font-weight: bold; }
.entrada-opcoes label { display: flex; gap: var(--sp-3); align-items: center; min-height: 48px; padding: var(--sp-3); border: 2px solid var(--muted); border-radius: var(--r-md); cursor: pointer; }
.entrada-opcoes label:has(input:checked) { background: var(--soft-sun); border-color: var(--ink); }
.entrada-opcoes input { width: 22px; height: 22px; flex: none; accent-color: var(--ink); }
.entrada-promessa { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.entrada-promessa li { display: flex; gap: var(--sp-3); align-items: center; min-height: 48px; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--soft-leaf); color: var(--ink); font-weight: 700; }
.entrada-promessa li span { font-size: var(--icon-sm); flex: none; }
.convite-nuvem label { display: flex; gap: var(--sp-3); align-items: center; min-height: 44px; }
.convite-nuvem input { width: 24px; height: 24px; flex: none; }

/* --- Trilha (início) --- */
.goal { display: flex; align-items: center; gap: var(--sp-3); }
.poucos-minutos { display: grid; justify-items: center; gap: 2px; text-align: center; }
.poucos-minutos .link { min-height: 44px; font-weight: 700; }
.poucos-minutos small { color: var(--muted); font-size: var(--text-sm); }
.path { display: grid; gap: 0; padding: var(--sp-3) 0 0; }
.node-row { display: flex; align-items: center; gap: var(--sp-4); min-height: 60px; margin-left: var(--turn); position: relative; }
.node { width: 56px; height: 52px; flex-shrink: 0; border: 0; border-radius: 50%; background: var(--surface); color: var(--ink); box-shadow: 0 6px 0 var(--line), inset 0 0 0 3px var(--line);
  font: 800 var(--icon-sm) var(--display); cursor: pointer; position: relative; }
.node.done { background: var(--leaf); box-shadow: 0 6px 0 var(--leaf-deep); color: var(--on-leaf); }
.node.next { background: var(--sun); box-shadow: 0 6px 0 var(--sun-deep); color: var(--on-sun); }
.node.next::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 4px solid var(--sun); opacity: .5; animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { from { transform: scale(.9); opacity: .7; } to { transform: scale(1.15); opacity: 0; } }
.node .star { position: absolute; right: -4px; top: -6px; font-size: var(--text-md); }
.node.chest { background: var(--soft-sun); box-shadow: 0 6px 0 var(--sun-deep); font-size: var(--icon-md); }
.node.locked, .node.chest.locked { filter: grayscale(1); opacity: .6; box-shadow: 0 6px 0 var(--line); }
.node.chest.ready { animation: wiggle 1.4s ease-in-out infinite; }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-8deg); } 40% { transform: rotate(8deg); } 60% { transform: rotate(-4deg); } }
.node-label { display: grid; min-width: 0; }
.node-label small { color: var(--muted); font-size: var(--text-xs); }
.node-label small:empty { display: none; }
.node-label strong { font: 800 var(--text-md) var(--display); }
.start-tip { position: absolute; left: -8px; top: -14px; background: var(--surface); border: var(--borda); border-radius: var(--r-sm); padding: 0 var(--sp-2); font: 800 var(--text-xs) var(--display); color: var(--leaf); z-index: 1; }
.week-head { display: grid; gap: 2px; padding-top: var(--sp-2); }
.week-head q { font-size: var(--text-sm); }
.week-head cite { color: var(--muted); font-size: var(--text-xs); font-style: normal; }
.week-fold { margin-top: var(--sp-1); border: var(--borda); border-radius: var(--r-md); background: var(--surface); }
.week-fold > summary { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); min-height: 48px; padding: var(--sp-2) var(--sp-4); cursor: pointer; font-family: var(--display); }
.week-fold > summary b { color: var(--leaf); white-space: nowrap; }
.week-fold[open] { padding: 0 var(--sp-3) var(--sp-3); }
.week-fold[open] > summary { padding: var(--sp-2) 2px; }
.week-next { display: grid; gap: 2px; margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-4); border: 2px dashed var(--line); border-radius: var(--r-md); }
.week-next strong { font-family: var(--display); font-size: var(--text-md); }
.week-next .week-later { margin: 0; }
.week-later { margin: var(--sp-2) 2px 0; color: var(--muted); font-size: var(--text-sm); }
.garden-preview { border-radius: var(--r-md); overflow: hidden; }
.garden-preview svg { width: 100%; height: auto; display: block; }
.level-row { display: flex; align-items: center; gap: var(--sp-3); font-weight: 700; font-size: var(--text-sm); }
/* trilha fora de cartão: direto no fundo da tela */
.trilha { display: grid; gap: var(--sp-1); padding: 0 var(--sp-1); }
.hero { gap: var(--sp-1); padding: var(--sp-2) var(--sp-4); }
.hero .goal { display: grid; gap: var(--sp-1); }
.hero .nuvem svg { width: 60px; height: 52px; }
/* "Hoje no jardim": três linhas que abrem o detalhe */
.painel.painel { border: 0; border-radius: 0; background: none; padding: 0; }
.hoje { padding: var(--sp-3) var(--sp-4); gap: var(--sp-1); }
.hoje .surface-lista { gap: 0; }
.hoje .surface-lista > * + * { padding-top: 0; }
.painel-linha { display: flex; align-items: center; gap: var(--sp-3); min-height: 48px; }
.painel-linha > div { display: grid; min-width: 0; flex: 1; }
.painel-linha small { color: var(--muted); font-size: var(--text-sm); }
.btn-mini { min-height: 44px; padding: var(--sp-2) var(--sp-4); }
.painel > summary { display: flex; align-items: center; gap: var(--sp-3); min-height: 48px; cursor: pointer; list-style: none; }
.painel > summary::-webkit-details-marker { display: none; }
.painel > summary::after { content: "›"; font: 800 var(--text-lg) var(--display); color: var(--muted); transition: transform .2s; }
.painel[open] > summary::after { transform: rotate(90deg); }
.painel > summary .pi { font-size: var(--icon-sm); width: 32px; text-align: center; flex: none; }
.painel > summary b { flex: 1; min-width: 0; }
.painel > summary .resumo { color: var(--muted); font-weight: 700; font-size: var(--text-sm); text-align: right; }
.painel.painel[open] { display: grid; gap: var(--sp-3); padding-bottom: var(--sp-3); }
/* ofensiva */
.foguinho { width: 130px; max-width: 100%; height: auto; flex: none; }
.streak-hero { display: flex; gap: var(--sp-3); align-items: center; }
.streak-hero > div { min-width: 0; }
.streak-hero .foguinho { width: 100px; }
.streak-card { border-color: var(--flame); background: var(--surface); }
.milestone-hint { padding: var(--sp-3); border-radius: var(--r-md); background: var(--soft-sun); color: var(--ink); }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-1); text-align: center; }
.week b { font-size: var(--text-xs); color: var(--muted); }
.week i { display: grid; place-items: center; margin: 2px auto 0; width: 30px; height: 30px; border-radius: 50%; background: var(--line); font-style: normal; font-size: var(--text-sm); max-width: 100%; }
.week i.done { background: var(--flame); color: var(--on-flame); }
.week i.frozen { background: var(--water); color: var(--on-water); }
.week i.today { box-shadow: 0 0 0 3px var(--soft-sun), 0 0 0 5px var(--flame); }
/* próxima figurinha */
.next-sticker { border: 2px dashed var(--muted); }
.sticker-preview { display: flex; gap: var(--sp-4); align-items: center; }
.sticker-preview > span { font-size: var(--icon-lg); }
.sticker-preview > div { min-width: 0; }
.sticker-progress { display: grid; gap: var(--sp-1); font-size: var(--text-sm); color: var(--ink); }
.sticker-progress progress { width: 100%; min-width: 0; height: 12px; accent-color: var(--leaf-deep); }
/* missões */
.quest { display: grid; grid-template-columns: 34px 1fr auto; gap: var(--sp-3); align-items: center; }
.quest .qi { font-size: var(--icon-sm); text-align: center; }
.quest .qt { font-weight: 700; font-size: var(--text-sm); }
.qbar { height: 16px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; margin-top: var(--sp-1); position: relative; }
.qbar > i { display: block; height: 100%; background: var(--sun); border-radius: inherit; transition: width .5s; }
.qbar > span { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--text-xs); font-weight: 800; line-height: 1; color: var(--ink); }
.quest .chk { font-size: var(--icon-sm); min-width: var(--icon-sm); }
/* turma */
.gang { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
.mate { text-align: center; display: grid; gap: 2px; justify-items: center; min-width: 0; }
.mate svg { width: 100%; max-width: 80px; height: auto; }
.mate b { font: 800 var(--text-md) var(--display); } .mate span { font-size: var(--text-xs); color: var(--muted); line-height: 1.25; }

/* --- Lição (layout não muda no Bloco G) --- */
.lesson-top { display: flex; align-items: center; gap: var(--sp-3); }
.x { width: 44px; height: 44px; border: 0; background: none; font-size: var(--icon-sm); color: var(--muted); cursor: pointer; flex-shrink: 0; }
.lbar { flex: 1; height: 18px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.lbar > i { display: block; height: 100%; width: 0; background: var(--leaf); border-radius: inherit; transition: width .35s ease-out, background .3s; }
.lbar.gold > i { background: var(--sun); }
.lbar > i::after { content: ""; display: block; height: 5px; margin: var(--sp-1) var(--sp-3) 0; border-radius: var(--r-sm); background: rgba(255,255,255,.35); }
.combo { min-height: 26px; font: 800 var(--text-sm) var(--display); color: var(--flame-text); text-align: center; letter-spacing: .04em; }
.combo.pop { animation: comboPop .4s cubic-bezier(.3,1.6,.5,1); }
@keyframes comboPop { from { transform: scale(.4); } to { transform: scale(1); } }
.stage { display: grid; gap: var(--sp-4); }
.scene { border-radius: var(--r-lg); overflow: hidden; position: relative; border: var(--borda); background: #0B1026; /* céu da cena: igual nos dois temas */ }
.scene svg { display: block; width: 100%; height: auto; cursor: pointer; touch-action: manipulation; }
.scene .hint { position: absolute; left: var(--sp-3); bottom: var(--sp-3); background: rgba(255,255,255,.92); color: #14245C; font-weight: 700; font-size: var(--text-sm); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-pill); pointer-events: none; }
.night { transition: opacity 1.2s ease; } .lit .night { opacity: 0; }
.popin { animation: popin .45s cubic-bezier(.3,1.6,.5,1) both; transform-box: fill-box; transform-origin: center; }
@keyframes popin { from { transform: scale(0); } to { transform: scale(1); } }
.storyline { display: grid; gap: var(--sp-3); }
.storyline p { font-size: var(--text-md); border-radius: var(--r-sm); padding: 2px var(--sp-2); margin: 0 calc(-1 * var(--sp-2)); transition: background .3s; }
.storyline p.reading { background: var(--soft-sun); }
.verse { background: var(--soft-leaf); border-color: transparent; }
.verse.sec { background: var(--surface); }
.verse q { font: 600 1.25rem/1.25 var(--display); quotes: "“" "”"; /* exceção: tamanho da lição preservado */ }
.verse cite { font-style: normal; font-size: var(--text-sm); color: var(--muted); }
.choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.choice { border: var(--borda); background: var(--surface); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-2); display: grid; gap: var(--sp-2); justify-items: center; cursor: pointer;
  font: 700 var(--text-sm) var(--body); line-height: 1.2; min-width: 0; box-shadow: 0 4px 0 var(--line); }
.choice .ci { font-size: 2.3rem; line-height: 1; /* exceção: tamanho da lição preservado */ }
.choice[aria-pressed="true"] { border-color: var(--sky); background: var(--soft-sky); box-shadow: 0 4px 0 var(--sky); }
.choice.right { border-color: var(--leaf); background: var(--soft-leaf); box-shadow: 0 4px 0 var(--leaf); }
.choice.wrong, .habitat.wrong, .orderrow button.wrong { border-color: var(--coral); background: var(--soft-coral); box-shadow: 0 4px 0 var(--coral); animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.big-listen { justify-self: center; width: 96px; height: 96px; border-radius: var(--r-lg); border: 0; background: var(--sky); color: var(--on-sky); font-size: 2.6rem; /* exceção: tamanho da lição preservado */ cursor: pointer; box-shadow: 0 5px 0 var(--sky-deep); }
.tf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.statement { display: flex; gap: var(--sp-3); align-items: center; font: 700 var(--text-md) var(--display); }
.statement span { font-size: 2.4rem; /* exceção: tamanho da lição preservado */ }
.slots { min-height: 64px; display: grid; gap: var(--sp-2); padding: var(--sp-2) 0; border-bottom: var(--borda); }
.bank { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }
.chip { border: var(--borda); background: var(--surface); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); font: 700 var(--text-md) var(--body); cursor: pointer; box-shadow: 0 3px 0 var(--line); min-height: 44px; text-align: left; }
.chip.used { visibility: hidden; }
.chip.long { width: 100%; font-weight: 400; font-size: var(--text-md); }
.verse-line { font: 600 1.2rem/2.1 var(--display); /* exceção: tamanho da lição preservado */ }
.blank { display: inline-block; min-width: 76px; border-bottom: 3px solid var(--sky); text-align: center; margin: 0 2px; padding: 0 var(--sp-2); cursor: pointer; border-radius: var(--r-sm); }
.blank.filled { background: var(--soft-sky); }
.pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.pairs .col { display: grid; gap: var(--sp-3); }
.pair { border: var(--borda); background: var(--surface); border-radius: var(--r-md); min-height: 56px; font: 700 var(--text-md) var(--body); cursor: pointer; box-shadow: 0 3px 0 var(--line); }
.pair.emoji { font-size: var(--icon-md); }
.pair[aria-pressed="true"] { border-color: var(--sky); background: var(--soft-sky); }
.pair.matched { border-color: var(--leaf); background: var(--soft-leaf); opacity: .55; cursor: default; }
.pair.miss { border-color: var(--coral); background: var(--soft-coral); animation: shake .35s; }
.parents { border-style: dashed; }
.parents ol, .parents ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--sp-2); }
.prayer-line { font: 600 var(--text-lg)/1.3 var(--display); } .prayer-done { color: var(--muted); }
.prayer-list { display: grid; gap: var(--sp-2); }
/* rodapé da lição: VERIFICAR → faixa de resultado → CONTINUAR */
.foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-foot); background: var(--bg); border-top: var(--borda);
  padding: var(--sp-4) max(var(--sp-4), env(safe-area-inset-right, 0px)) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)) max(var(--sp-4), env(safe-area-inset-left, 0px)); transition: background .2s; }
.foot .in { max-width: 560px; margin: 0 auto; display: grid; gap: var(--sp-3); }
.foot.ok { background: var(--soft-leaf); border-color: transparent; }
.foot.no { background: var(--soft-coral); border-color: transparent; }
.verdict { display: none; gap: 2px; }
.foot.ok .verdict, .foot.no .verdict { display: grid; }
.verdict b { font: 800 var(--text-lg) var(--display); }
.foot.ok .verdict b { color: var(--leaf); } .foot.no .verdict b { color: var(--coral); }
.verdict span { font-size: var(--text-sm); }
.foot .skipbtn { justify-self: center; }

/* --- Recompensas (sobreposição) --- */
.reward { width: 100%; max-width: 420px; display: grid; gap: var(--sp-4); justify-items: center; text-align: center; }
.reward .art { font-size: var(--icon-xl); line-height: 1; }
.reward .art.big { font-size: var(--icon-2xl); }
.reward h2 { font-size: var(--text-xl); color: var(--gold-text); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); width: 100%; }
.tile { border-radius: var(--r-md); border: 2px solid var(--sun); overflow: hidden; background: var(--surface); }
.tile b { display: block; background: var(--sun); color: var(--on-sun); font: 800 var(--text-xs) var(--body); letter-spacing: .06em; padding: var(--sp-1); text-transform: uppercase; }
.tile span { display: block; font: 800 var(--text-lg) var(--display); padding: var(--sp-3) var(--sp-1); font-variant-numeric: tabular-nums; }
.tile.leaf { border-color: var(--leaf); } .tile.leaf b { background: var(--leaf); color: var(--on-leaf); }
.tile.sky { border-color: var(--sky); } .tile.sky b { background: var(--sky); color: var(--on-sky); }
.tile.flame { border-color: var(--flame); } .tile.flame b { background: var(--flame); color: var(--on-flame); }
.breakdown { width: 100%; display: grid; gap: var(--sp-1); font-size: var(--text-sm); }
.breakdown div { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--line); padding: var(--sp-1) 0; }
.chest-btn { border: 0; background: none; font-size: var(--icon-2xl); cursor: pointer; animation: wiggle 1.2s ease-in-out infinite; }
.chest-btn.open { animation: none; }
.sticker-paste { display: grid; place-items: center; width: 145px; height: 155px; margin: var(--sp-3) auto; border: 5px solid var(--surface); outline: 2px dashed var(--muted); border-radius: var(--r-lg); background: var(--soft-sun); box-shadow: 4px 6px 0 var(--line); animation: colar-figurinha .55s ease-out both; }
.sticker-paste > span { font-size: var(--icon-xl); }
@keyframes colar-figurinha { from { transform: translateY(-28px) rotate(-12deg) scale(1.15); opacity: 0; } to { transform: translateY(0) rotate(-3deg) scale(1); opacity: 1; } }

/* --- Jogos --- */
.games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.game-card { border: var(--borda); background: var(--surface); border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-3); display: grid; gap: var(--sp-1); justify-items: center; text-align: center; cursor: pointer; box-shadow: 0 4px 0 var(--line); min-width: 0; }
.game-card .gi { font-size: 2.6rem; /* exceção: tamanho dos jogos preservado */ } .game-card b { font: 800 var(--text-md) var(--display); } .game-card small { color: var(--muted); font-size: var(--text-xs); }
.game-card .done-today { color: var(--leaf); font-weight: 700; }
.memory { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
.mem { aspect-ratio: 1; max-width: 100%; border: 0; border-radius: var(--r-md); background: var(--sky); color: var(--on-sky); font-size: var(--icon-md); cursor: pointer; box-shadow: 0 4px 0 var(--sky-deep); }
.mem.up { background: var(--surface); box-shadow: inset 0 0 0 2px var(--line); }
.mem.got { background: var(--soft-leaf); box-shadow: inset 0 0 0 2px var(--leaf); }
.orderrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); gap: var(--sp-2); }
.orderrow button { min-width: 44px; min-height: 44px; aspect-ratio: 1; max-width: 100%; border: var(--borda); border-radius: var(--r-md); background: var(--surface); font: 800 var(--icon-sm) var(--display); cursor: pointer; padding: 0; }
.orderrow button.placed { background: var(--soft-leaf); border-color: var(--leaf); }
.habitats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.habitat { border: 3px dashed var(--line); border-radius: var(--r-md); min-height: 120px; padding: var(--sp-2) var(--sp-1); display: grid; align-content: start; justify-items: center; gap: var(--sp-1); cursor: pointer; background: var(--surface); font-weight: 800; min-width: 0; }
.habitat .h-ic { font-size: var(--icon-md); } .habitat .h-in { font-size: var(--icon-sm); word-break: break-all; text-align: center; }
.animals { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }
.animals button { width: 60px; height: 60px; border-radius: var(--r-md); border: var(--borda); background: var(--surface); font-size: var(--icon-md); cursor: pointer; box-shadow: 0 3px 0 var(--line); }
.animals button[aria-pressed="true"] { border-color: var(--sky); background: var(--soft-sky); }

/* --- Pintar (livro de colorir): a folha branca conserva o contraste nos dois temas --- */
.paper { background: #FFFFFF; border-radius: var(--r-lg); border: var(--borda); overflow: hidden; }
.paper svg { display: block; width: 100%; height: auto; }
.paper [data-r] { cursor: pointer; }
.paint-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.paint-card { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3); border: var(--borda); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); text-align: left; min-width: 0; cursor: pointer; }
.paint-card:disabled { opacity: 1; cursor: default; }
.paint-card:disabled .paint-thumb { filter: grayscale(1); }
.paint-thumb { display: block; overflow: hidden; border-radius: var(--r-sm); background: #fff; width: 100%; /* papel branco de propósito, como o .paper */ }
.paint-thumb svg { display: block; width: 100%; height: auto; pointer-events: none; }
.paint-card b { line-height: 1.25; }
.paint-card small { color: var(--ink); font-size: var(--text-sm); }
.palette { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--sp-2); }
.paint-palette { display: flex; flex-wrap: nowrap; gap: var(--sp-3); padding: var(--sp-2); overflow-x: auto; min-width: 0; scroll-snap-type: x proximity; padding-right: 40px;
  /* a borda da direita some aos poucos: mostra que há mais cores para deslizar */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
.paint-palette .swatch { scroll-snap-align: start; }
.paint-palette .swatch { width: 44px; height: 44px; flex: 0 0 44px; }
.swatch { aspect-ratio: 1; max-width: 100%; border-radius: 50%; border: 3px solid var(--muted); box-shadow: 0 0 0 2px var(--surface); cursor: pointer; padding: 0; }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--ink); }
.paint-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin: var(--sp-3) 0; }
.paint-tools button, .paint-access select { min-height: 44px; min-width: 44px; }
.paint-paper { max-height: 65vh; overflow: auto; overscroll-behavior: contain; touch-action: pan-y; }
.paint-paper.ampliado { touch-action: none; cursor: grab; }
.paint-paper svg { max-width: none; }
.paint-paper [data-r]:focus, .paint-paper .parte-escolhida { outline: none; stroke: #1D1D2B; stroke-width: 5; stroke-dasharray: 5 3; }
.paint-access { margin: 0; }
.paint-access > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--link); }
.paint-access[open] { max-height: 160px; overflow: auto; }
.paint-access select { width: 100%; background: var(--surface); color: var(--ink); border: var(--borda); border-radius: var(--r-sm); padding: var(--sp-2); }
.paint-final { max-width: 400px; margin: var(--sp-4) auto; }

/* A página fica parada enquanto só o papel rola (inclusive ampliado). */
body.pintando { padding: var(--sp-2) var(--sp-3); height: 100dvh; overflow: hidden; }
.pintando .hud, .pintando .bottom-nav { display: none; }
.pintando .casca { height: 100%; }
.pintando #view { display: flex; flex-direction: column; height: 100%; gap: var(--sp-2); min-height: 0; padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; /* reserva: paisagem ou fonte ampliada */ }
.pintando #view > * { flex-shrink: 0; }
.pintando #view > h1 { font-size: var(--text-lg); }
.pintando #view > .paint-paper { flex: 1 1 auto; min-height: 80px; max-height: none; }
.paint-faixa { min-width: 0; }
.paint-tools { flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-1) 0; }
.paint-tools > * { flex-shrink: 0; }
.paint-tools .btn { padding: var(--sp-2); min-height: 44px; }
.paint-progresso { display: grid; gap: var(--sp-1); font-size: var(--text-xs); }
.paint-progresso .bar { height: var(--sp-2); }
.paint-foot { position: fixed; bottom: 0; left: 0; right: 0; padding: var(--sp-2) var(--sp-3) calc(var(--sp-2) + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: var(--borda); z-index: var(--z-nav); }
.paint-foot .in { max-width: 536px; margin: auto; }
.paint-grupo { display: grid; gap: var(--sp-3); }
.paint-gallery.presos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.paint-card.trancado { background: var(--bg); border-style: dashed; padding: var(--sp-2); }
.paint-card.trancado .paint-thumb { filter: grayscale(1); opacity: .5; }
.paint-card.trancado b, .paint-card.trancado small { font-size: var(--text-xs); }
.selo-pintado { color: var(--tag-text); background: var(--soft-leaf); padding: var(--sp-1); border-radius: var(--r-sm); font-size: var(--text-sm); }
.selo-comecou { color: var(--muted); font-size: var(--text-sm); }
#paintconfirm:not([hidden]) { display: grid; }
#paintconfirm { position: fixed; inset: 25% var(--sp-4) auto; max-width: 500px; margin: auto; z-index: var(--z-overlay); box-shadow: 0 0 0 100vmax #0008; }

/* --- Álbum e conquistas --- */
.album-nav { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; gap: var(--sp-2); align-items: center; }
.album-seta { padding: 0; font: 800 var(--text-xl) var(--display); }
.album-atual { display: grid; text-align: center; min-width: 0; }
.album-atual b { font: 800 var(--text-lg) var(--display); line-height: 1.15; }
.album-atual small { color: var(--muted); font-size: var(--text-sm); }
.album-todas > summary { min-height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--link); font-weight: 700; }
.album-todas ul { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: var(--sp-1); }
.album-todas li button { width: 100%; min-height: 44px; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); border: var(--borda); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font: 700 var(--text-md) var(--body); text-align: left; cursor: pointer; }
.album-todas li small { color: var(--muted); font-size: var(--text-sm); white-space: nowrap; }
.album-todas [aria-pressed="true"] { background: var(--soft-leaf); border-color: var(--leaf); }
.album.collection { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.sticker-card { min-width: 0; display: grid; align-content: start; gap: var(--sp-2); padding: var(--sp-3); border: 2px dashed var(--muted); border-radius: var(--r-lg); background: var(--bg); text-align: center; overflow-wrap: anywhere; }
.sticker-card.owned { border-style: solid; border-color: var(--leaf-deep); background: var(--soft-leaf); }
.sticker-art { height: 92px; display: grid; place-items: center; font-size: 3.5rem; /* exceção: cabe na altura fixa da figurinha */ }
.sticker-art .foguinho { height: 92px; width: auto; }
.sticker-art.silhouette { filter: grayscale(1) brightness(0); opacity: .6; }
:root[data-theme="dark"] .sticker-art.silhouette { filter: grayscale(1) brightness(0) invert(1); }
.sticker-card h3 { font-size: var(--text-md); color: var(--ink); }
.sticker-criterion, .sticker-card small { font-size: var(--text-sm); color: var(--ink); line-height: 1.4; }
.ach { display: grid; grid-template-columns: 46px 1fr; gap: var(--sp-3); align-items: center; }
.ach .ai { font-size: var(--icon-md); text-align: center; }
.ach .tiers { color: var(--gold-text); letter-spacing: .1em; }
.family-certificate { display: grid; gap: var(--sp-2); text-align: center; padding: var(--sp-5) var(--sp-3); border: 3px double var(--muted); border-radius: var(--r-md); background: var(--soft-leaf); color: var(--ink); }
.family-certificate > span { font-size: var(--icon-md); }

/* --- Pais --- */
.ajustes h3 { font-size: var(--text-md); margin-top: var(--sp-2); }
.ajustes h3:first-of-type { margin-top: 0; }
.pais-lista .painel > summary b { font-weight: 700; }
.pais-corpo { display: grid; gap: var(--sp-3); padding: 0 0 var(--sp-3); }
.pais-recomecar.pais-recomecar { padding: 0 var(--sp-4); margin-top: var(--sp-4); }
.lista-numerada { margin: 0; padding-left: 1.2em; display: grid; gap: var(--sp-2); }
.aceite { display: flex; gap: var(--sp-3); align-items: center; min-height: 44px; }
.aceite input { width: 24px; height: 24px; flex: none; }
.nuvem-bloco { display: grid; gap: var(--sp-3); }
.perfil-pais { display: grid; gap: var(--sp-2); }
.perfil-pais form { display: grid; gap: var(--sp-2); }
.grupo-pref > summary { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: center; min-height: 48px; padding: var(--sp-2) var(--sp-3); border: var(--borda); border-radius: var(--r-md); cursor: pointer; font-weight: 700; }
.grupo-pref > summary .resumo { color: var(--muted); font-size: var(--text-sm); text-align: right; margin-left: auto; }
.grupo-pref > summary::-webkit-details-marker { display: none; }
.grupo-pref > summary::after { content: "›"; font: 800 var(--text-lg) var(--display); color: var(--muted); transition: transform .2s; }
.grupo-pref[open] > summary::after { transform: rotate(90deg); }
.grupo-pref[open] > summary { margin-bottom: var(--sp-2); }
.grupo-pref legend { position: absolute; left: -9999px; } /* o resumo já mostra a pergunta; a legenda fica para o leitor de tela */
.weeks { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.weeks li { display: flex; gap: var(--sp-3); align-items: baseline; }
.weeks .n { font: 800 var(--text-sm) var(--display); color: var(--muted); min-width: 4.5em; font-variant-numeric: tabular-nums; }
.weeks .rev { display: block; color: var(--muted); font-size: var(--text-xs); }
.weeks .rev.ok { color: var(--leaf); }

/* --- Devocional (devocionais em imagem) --- */
.devo-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); }
.devo-lista > p, .devo-lista > .vazio { grid-column: 1 / -1; }
.vazio { display: grid; gap: var(--sp-3); justify-items: start; padding: var(--sp-4) 0; }
.devo-card { display: grid; gap: var(--sp-2); padding: var(--sp-2); border: var(--borda); border-radius: var(--r-md); background: var(--surface); box-shadow: 0 4px 0 var(--line); text-align: left; cursor: pointer; color: var(--ink); font: inherit; }
.devo-thumb { display: block; aspect-ratio: 9 / 16; max-height: 220px; overflow: hidden; border-radius: var(--r-sm); background: var(--line); }
.devo-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.devo-info { display: grid; gap: 2px; } .devo-info b { font-family: var(--display); line-height: 1.2; } .devo-info small { color: var(--muted); font-size: var(--text-sm); }
/* moldura azul-noite: a mesma cor do rodapé das artes, para a imagem "encaixar" no app nos dois temas */
.devo-imagem { display: block; margin: var(--sp-2) 0; padding: var(--sp-2); border-radius: var(--r-lg); background: var(--noite); box-shadow: 0 4px 0 var(--line); }
.devo-imagem img { display: block; width: 100%; height: auto; border-radius: var(--r-md); }
.devo-texto summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.devo-credito { font-size: var(--text-xs); }
.devo-convite { margin-top: var(--sp-3); border-color: var(--sun); } .devo-convite h2 { margin: 0 0 var(--sp-2); }

/* ========== 5. Utilitários ========== */
.row { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }
.between { justify-content: space-between; }

/* ========== 6. Media queries ========== */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sticker-art.silhouette { filter: grayscale(1) brightness(0) invert(1); } }
@media (max-width: 380px) { .stat { padding: 3px var(--sp-2); font-size: var(--text-sm); } .stats { gap: var(--sp-1); } .hud-pais { padding: var(--sp-1) var(--sp-2); } .brand span { display: none; } .choice .ci { font-size: 1.9rem; /* exceção: lição preservada */ } }
/* com o botão Pais no topo, o nome da marca só cabe em telas mais largas (o broto continua) */
@media (max-width: 440px) { .brand span { display: none; } .stat { padding: var(--sp-1) var(--sp-2); } .stats { gap: var(--sp-1); } }
@media (min-width: 700px) { .paint-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }