/* ============================================================
   MELHOR IDADE+ — Portal gamificado para a melhor idade
   CSS principal — foco em legibilidade e telas grandes
   ============================================================ */

/* ---------- 1. Variáveis e reset ---------- */
/* o atributo hidden SEMPRE esconde — mesmo em elementos com classes
   display:flex (lição do apontador: o flex mostrava o que estava
   "escondido") */
[hidden]{ display:none !important; }

:root{
  --cor-fundo:#FFF7E8;            /* creme quente */
  --cor-cartao:#FFFFFF;
  --cor-texto:#22303C;
  --cor-texto-suave:#5A6B7A;
  --cor-primaria:#0F7B5F;         /* verde acolhedor */
  --cor-primaria-escura:#0A5C47;
  --cor-primaria-clara:#DDF3EA;
  --cor-destaque:#F0882B;         /* laranja sol */
  --cor-destaque-escura:#C96A12;
  --cor-destaque-clara:#FDEBD3;
  --cor-alerta:#D64545;
  --cor-sucesso:#1E9E62;
  --cor-info:#2F6FD0;
  --cor-borda:#E6DCCB;
  --sombra:0 6px 18px rgba(60,42,20,.10);
  --sombra-suave:0 3px 10px rgba(60,42,20,.07);
  --raio:18px;
  --fs-padrao:1.125rem;           /* base grande: 18px (WCAG friendly p/ 60+) */
  --espaco:18px;
}

/* Alto contraste: ativado via <html data-contraste="1"> */
html[data-contraste="1"]{
  --cor-fundo:#FFFFFF;
  --cor-cartao:#FFFFFF;
  --cor-texto:#000000;
  --cor-texto-suave:#111111;
  --cor-primaria:#004C8F;
  --cor-primaria-escura:#002D57;
  --cor-primaria-clara:#C9E4FF;
  --cor-destaque:#B45309;
  --cor-destaque-escura:#8A3E06;
  --cor-destaque-clara:#FDE68A;
  --cor-alerta:#B00000;
  --cor-borda:#000000;
  --cor-info:#002D9E;
}
html[data-contraste="1"] .cartao,html[data-contraste="1"] .cartao-jogo,
html[data-contraste="1"] .bloco-tempo,html[data-contraste="1"] nav a{
  border:2px solid #000 !important;
}

/* Tamanho de letra: via raiz (html). A+ A- muda o data-fs */
html{ font-size:100%; }
html[data-fs="1"]{ font-size:118%; }
html[data-fs="2"]{ font-size:138%; }

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:"Verdana","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:var(--fs-padrao);
  line-height:1.65;
  color:var(--cor-texto);
  background:
    radial-gradient(circle at 12% -5%, var(--cor-destaque-clara) 0, transparent 30%),
    radial-gradient(circle at 95% 8%, var(--cor-primaria-clara) 0, transparent 28%),
    var(--cor-fundo);
  min-height:100vh;
  padding-bottom:140px;
}
img,svg{ max-width:100%; vertical-align:middle; }
button{ font-family:inherit; font-size:inherit; cursor:pointer; }
a{ color:var(--cor-primaria); }
:focus-visible{ outline:4px solid var(--cor-info); outline-offset:2px; border-radius:8px; }
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* ---------- 2. Estrutura ---------- */
.container{ max-width:1120px; margin:0 auto; padding:0 var(--espaco); }
.oculto{ display:none !important; }

/* ---------- 3. Cabeçalho ---------- */
/* (carimbo ea) O cabeçalho verde NÃO gruda mais: quem gruda é só o menu.
   Antes os DOIS grudavam no topo 0 e o verde (z-index maior) deslizava por
   cima do menu ao rolar, cobrindo a primeira fileira (Início, Jogos...).
   Agora o verde rola junto com a página e o menu INTEIRO fica sempre visível. */
.cabecalho{
  background:linear-gradient(135deg,var(--cor-primaria) 0%,var(--cor-primaria-escura) 100%);
  color:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.cabecalho-inner{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px var(--espaco); max-width:1120px; margin:0 auto;
}
.marca{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.marca-icone{
  width:46px; height:46px; border-radius:14px; background:#fff;
  display:grid; place-items:center; font-size:1.6rem;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.6);
}
.marca-icone img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }
.marca-nome{ font-size:1.15rem; font-weight:800; line-height:1.15; }
.marca-nome small{ display:block; font-weight:400; font-size:.72rem; opacity:.92; letter-spacing:.4px; }

.chip-status{
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35);
  padding:8px 14px; border-radius:999px; font-weight:700;
}
.chip-status b{ font-size:1.1rem; }
.chip-nivel{ font-size:.8rem; display:flex; flex-direction:column; align-items:flex-start; line-height:1.2; }
.chip-nivel span{ font-weight:400; opacity:.9; }
.barra-nivel{ width:110px; height:8px; background:rgba(255,255,255,.3); border-radius:99px; overflow:hidden; }
.barra-nivel i{ display:block; height:100%; background:linear-gradient(90deg,#FFD166,#FF9F1C); border-radius:99px; transition:width .6s ease; }
.botao-icone{
  border:none; background:rgba(255,255,255,.16); color:#fff;
  width:52px; height:52px; border-radius:14px; font-size:1.45rem;
  display:grid; place-items:center; transition:background .2s;
  border:1px solid rgba(255,255,255,.3);
}
.botao-icone:hover{ background:rgba(255,255,255,.32); }


@keyframes pisca-nuvem{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
.botao-icone.pisca-nuvem{
  animation:pisca-nuvem .55s ease-in-out 4;
  border-color:#FFD166;
  box-shadow:0 0 0 5px rgba(255,209,102,.45);
}

/* ---------- 3b. Faixa de apoio (PIX) ---------- */
.faixa-pix{
  background:linear-gradient(135deg,#FFF3D6,#FFE9AE);
  border-bottom:2px solid var(--cor-destaque);
}
.faixa-pix-inner{
  display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap;
  max-width:1120px; margin:0 auto; padding:8px var(--espaco);
}
.faixa-pix-emoji{ font-size:1.6rem; line-height:1; }
.faixa-pix p{
  flex:1; min-width:230px; margin:0;
  color:#6B4E0A; font-size:1.05rem; line-height:1.35; font-weight:600;
}
.faixa-pix .btn-pix{
  background:#820AD1; color:#fff; text-decoration:none;
  border-radius:999px; padding:12px 22px; font-weight:800; font-size:1.02rem;
  min-height:48px; display:inline-flex; align-items:center; gap:6px;
  box-shadow:0 2px 8px rgba(130,10,209,.35);
  transition:transform .12s ease, background .15s;
}
.faixa-pix .btn-pix:hover{ background:#9B2EE0; transform:translateY(-1px); }
.faixa-pix .btn-pix:active{ transform:translateY(0); }
.faixa-pix-fechar{
  border:1px solid rgba(90,69,8,.35); background:transparent; color:#6B4E0A;
  width:44px; height:44px; border-radius:12px; font-size:1rem; line-height:1;
  cursor:pointer; transition:background .15s;
}
.faixa-pix-fechar:hover{ background:rgba(255,255,255,.6); }
html[data-contraste="1"] .faixa-pix{ background:#000; border-bottom:2px solid #fff; }
html[data-contraste="1"] .faixa-pix p{ color:#fff; }
html[data-contraste="1"] .faixa-pix .btn-pix{ background:#fff; color:#000; box-shadow:none; border:2px solid #000; }
html[data-contraste="1"] .faixa-pix-fechar{ border-color:#fff; color:#fff; }
html[data-contraste="1"] .faixa-pix-fechar:hover{ background:#333; }

/* ---------- 4. Navegação principal ---------- */
nav.menu{
  background:var(--cor-cartao); border-top:1px solid var(--cor-borda);
  position:sticky; top:0; z-index:60; box-shadow:var(--sombra-suave);
}
nav.menu ul{
  list-style:none; display:flex; flex-wrap:wrap; justify-content:center;
  gap:5px; max-width:1120px; margin:0 auto;
  padding:8px var(--espaco);
}
nav.menu li{ display:flex; flex:0 1 auto; }
nav.menu a{
  display:flex; align-items:center; justify-content:center; gap:6px;
  white-space:nowrap; text-decoration:none; color:var(--cor-texto);
  padding:10px 11px; border-radius:14px; font-weight:700;
  border:1px solid transparent; min-height:48px; font-size:.94rem;
}
nav.menu a .emoji{ font-size:1.3rem; }
nav.menu a:hover{ background:var(--cor-primaria-clara); }
nav.menu a.ativo{
  background:var(--cor-primaria); color:#fff; border-color:var(--cor-primaria-escura);
}
html[data-contraste="1"] nav.menu a.ativo{ background:#000; color:#fff; }

/* No computador: menu um pouco mais cheio (itens mais compactos na
   horizontal = mais nomes por linha) e, em monitores largos, a fileira
   usa mais a largura da tela. A altura de toque (48px) continua
   garantida — só a densidade horizontal muda. */
@media (min-width:1280px){
  nav.menu ul{ max-width:1280px; }
}

/* Menu que se exprime: em telas menores, itens ficam mais compactos e,
   se ainda assim não couberem, quebram para a linha seguinte — nunca
   aparece barra de rolagem horizontal no menu. */
@media (max-width:840px){
  nav.menu ul{ gap:4px; padding:6px; }
  nav.menu a{ padding:8px 10px; font-size:.88rem; gap:5px; min-height:42px; border-radius:12px; }
  nav.menu a .emoji{ font-size:1.1rem; }
}
@media (max-width:520px){
  nav.menu a{ font-size:.84rem; padding:7px 9px; }
  nav.menu a .emoji{ font-size:1rem; }
}
@media (max-width:400px){
  nav.menu a .emoji{ display:none; } /* sobra espaço para os nomes das abas */
  nav.menu a{ gap:0; }
}

/* ---------- 5. Telas (screens) ---------- */
main{ padding-top:24px; }
.tela{ display:none; }
.tela.ativa{ display:block; animation:aparecer .35s ease; }
@keyframes aparecer{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }

.cabecalho-tela{ margin-bottom:20px; }
.cabecalho-tela h1{ font-size:clamp(1.6rem,3.4vw,2.3rem); line-height:1.2; color:var(--cor-primaria-escura); }
.cabecalho-tela p{ color:var(--cor-texto-suave); max-width:820px; margin-top:6px; }
html[data-contraste="1"] .cabecalho-tela h1{ color:#000; }

/* ---------- 6. Cartões genéricos ---------- */
.cartao{
  background:var(--cor-cartao); border:1px solid var(--cor-borda);
  border-radius:var(--raio); box-shadow:var(--sombra-suave);
  padding:20px; margin-bottom:20px;
}
.grade{ display:grid; gap:16px; }
.grade-3{ grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
.grade-2{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }

.cartao-clicavel{
  text-align:left; width:100%; color:var(--cor-texto);
  border:1px solid var(--cor-borda); background:var(--cor-cartao);
  border-radius:var(--raio); box-shadow:var(--sombra-suave);
  padding:20px; display:flex; flex-direction:column; gap:8px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.cartao-clicavel:hover{ transform:translateY(-3px); box-shadow:var(--sombra); }
.cartao-clicavel .emoji-grande{ font-size:2.6rem; line-height:1; }
.cartao-clicavel h3{ font-size:1.25rem; color:var(--cor-texto); }
.cartao-clicavel p{ color:var(--cor-texto-suave); font-size:.96rem; }

.etiqueta{
  display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.3px;
  padding:4px 12px; border-radius:999px; text-transform:uppercase;
  background:var(--cor-primaria-clara); color:var(--cor-primaria-escura);
}
.etiqueta.viagem{ background:#E3ECFF; color:#22418C; }
.etiqueta.saude{ background:#E2F6EA; color:#0E6B3E; }
.etiqueta.comer{ background:#FDEBD3; color:#A25A0A; }
.etiqueta.direito{ background:#F3E5F5; color:#6A1B9A; }
.etiqueta.jogo{ background:#FFF1C2; color:#8A6D00; }
.etiqueta.humor{ background:#FCE4EC; color:#A6305A; }
html[data-contraste="1"] .etiqueta{ border:1px solid #000; }

/* ---------- 7. Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border:none; border-radius:14px; font-weight:700; font-size:1.02rem;
  padding:15px 26px; min-height:56px; text-decoration:none;
  transition:filter .15s, transform .1s; user-select:none;
}
.btn:active{ transform:scale(.97); }
.btn-primario{ background:var(--cor-primaria); color:#fff; box-shadow:0 4px 0 var(--cor-primaria-escura); }
.btn-primario:hover{ filter:brightness(1.08); }
.btn-destaque{ background:var(--cor-destaque); color:#fff; box-shadow:0 4px 0 var(--cor-destaque-escura); }
.btn-destaque:hover{ filter:brightness(1.06); }
.btn-claro{ background:#fff; color:var(--cor-primaria-escura); border:2px solid var(--cor-primaria); }
.btn-cinza{ background:#E9E4DA; color:var(--cor-texto); }
.btn-grande{ font-size:1.25rem; padding:20px 30px; min-height:68px; }
.btn-bloqueado{ opacity:.55; pointer-events:none; }
.btn .emoji{ font-size:1.4em; }

/* ---------- 8. Saudação + check-in ---------- */
.bloco-saudacao h2{ font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.25; }
.bloco-saudacao .data-hoje{ color:var(--cor-texto-suave); font-size:.98rem; }
.area-checkin{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:linear-gradient(135deg,#FFF3DC,var(--cor-destaque-clara));
  border:1px solid var(--cor-borda); border-radius:var(--raio);
  padding:20px; margin-top:18px;
}
html[data-contraste="1"] .area-checkin{ background:#fff; }
.area-checkin .texto{ flex:1 1 300px; }
.area-checkin .texto h3{ font-size:1.25rem; margin-bottom:4px; }
.sequencia{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.ponto-dia{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:#fff; border:2px dashed var(--cor-borda); color:var(--cor-texto-suave);
  font-size:.9rem; font-weight:700;
}
.ponto-dia.ok{ background:var(--cor-sucesso); border:2px solid var(--cor-sucesso); color:#fff; }
.ponto-dia.hoje{ border-color:var(--cor-destaque); box-shadow:0 0 0 3px var(--cor-destaque-clara); }
.legenda-sequencia{ font-size:.85rem; color:var(--cor-texto-suave); }

/* ---------- 9. Clima ---------- */
.bloco-tempo{
  background:linear-gradient(135deg,#BFE3F7,#E3F2FB);
  border:1px solid var(--cor-borda); border-radius:var(--raio);
  padding:18px 20px; display:flex; gap:14px; flex-wrap:wrap; align-items:center;
}
html[data-contraste="1"] .bloco-tempo{ background:#fff; }
.tempo-principal{ display:flex; align-items:center; gap:12px; flex:1 1 300px; }
.tempo-principal .icone{ font-size:3.4rem; line-height:1; }
.tempo-temp{ font-size:2.5rem; font-weight:800; line-height:1; }
.tempo-detalhes{ color:var(--cor-texto-suave); font-size:.92rem; margin-top:4px; }
.dica-tempo{
  margin-top:10px; background:rgba(255,255,255,.6); border:1px dashed var(--cor-borda);
  padding:8px 12px; border-radius:12px; font-weight:600; font-size:1rem; line-height:1.5;
}
html[data-contraste="1"] .dica-tempo{ background:#fff; border:1px dashed #000; }
.tempo-futuro{ display:flex; gap:6px; flex:1 1 340px; justify-content:space-between; }
.dia-mini{ text-align:center; min-width:56px; padding:8px 6px; border-radius:12px; background:rgba(255,255,255,.6); }
html[data-contraste="1"] .dia-mini{ background:#eee; }
.dia-mini b{ display:block; font-size:.9rem; }
.dia-mini span{ font-size:1.25rem; }
.dia-mini small{ color:var(--cor-texto-suave); }
.tempo-erro{ color:var(--cor-alerta); font-weight:700; }
.link-ajuste{ background:none; border:none; color:var(--cor-info); text-decoration:underline; font-size:.9rem; padding:4px; }

/* ---------- 10. Metas do dia ---------- */
/* Cartão de metas ocupa a largura da página; em telas grandes as metas
   ficam em 2 colunas (mais curtinho para baixo); no celular, 1 coluna. */
.metas-lista{ display:grid; grid-template-columns:1fr; gap:0 28px; }
@media (min-width:760px){ .metas-lista{ grid-template-columns:1fr 1fr; } }
.linha-meta{
  display:flex; align-items:center; gap:12px; padding:12px 8px;
  border-bottom:1px dashed var(--cor-borda); cursor:pointer;
}
.linha-meta:last-child{ border-bottom:none; }
/* na última fileira do grid de 2 colunas, sem risco embaixo */
@media (min-width:760px){
  .linha-meta:nth-last-child(2):not(:last-child){ border-bottom:none; }
}
.linha-meta input{ width:30px; height:30px; accent-color:var(--cor-sucesso); flex:none; }
.linha-meta .emoji{ font-size:1.6rem; flex:none; }
.linha-meta label{ font-weight:700; cursor:pointer; flex:1; }
.linha-meta small{ color:var(--cor-texto-suave); font-weight:400; }
.linha-meta.riscado label{ text-decoration:line-through; opacity:.7; }

/* ---------- 11. Notícias / leituras ---------- */
.lista-noticias .item-noticia{ width:100%; }
.item-noticia{ display:flex; gap:14px; align-items:center; text-align:left; }
.item-noticia .emoji-grande{ font-size:2rem; flex:none; }
.item-noticia .meta{ display:flex; gap:8px; align-items:center; font-size:.8rem; color:var(--cor-texto-suave); }

/* ---------- 12. Jogos ---------- */
.cartao-jogo{
  position:relative; overflow:hidden;
}
.cartao-jogo .melhor{ font-size:.85rem; font-weight:700; color:var(--cor-destaque-escura); }
.jogo-info-mini{ font-size:.9rem; color:var(--cor-texto-suave); }

.area-jogo{
  background:var(--cor-cartao); border:1px solid var(--cor-borda);
  border-radius:var(--raio); box-shadow:var(--sombra); padding:22px; margin-top:16px;
}
.barra-jogo{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.barra-jogo h2{ font-size:1.4rem; margin-right:auto; }
.jogo-nav{ display:flex; gap:6px; }
.btn-jogo-seta{
  min-width:56px; min-height:56px; padding:8px 14px; font-size:1.55rem; font-weight:800;
}

/* Tela cheia OPCIONAL: o jogo abre normal; a pessoa toca em Ampliar se quiser.
   Não usa a API de fullscreen do navegador (pede permissão e some o X). */
body.jogo-ampliado{ padding-bottom:0; }
body.jogo-ampliado .cabecalho,
body.jogo-ampliado nav.menu,
body.jogo-ampliado .faixa-pix,
body.jogo-ampliado .rodape,
body.jogo-ampliado #tela-jogo .slot-anuncio{ display:none !important; }
body.jogo-ampliado main{ padding:0; }
body.jogo-ampliado .container{ max-width:none; padding:0; }
body.jogo-ampliado #tela-jogo.ativa{
  display:block; min-height:100vh; min-height:100dvh;
}
body.jogo-ampliado .area-jogo{
  margin:0; border-radius:0; border:none; box-shadow:none;
  min-height:100vh; min-height:100dvh;
  padding:12px 10px calc(16px + env(safe-area-inset-bottom, 0px));
  padding-top:calc(12px + env(safe-area-inset-top, 0px));
}
/* ---------- tela cheia DE VERDADE (API nativa — Android/Chrome etc.) ----------
   A .area-jogo inteira vira a tela (barra do navegador some): a barra do jogo
   (com o botão ✕ Sair) continua à vista junto. */
.area-jogo:fullscreen,
.area-jogo:-webkit-full-screen{
  background:var(--cor-fundo);
  overflow-y:auto;
  border-radius:0;
}
/* ampliado: destrava os "tetinhos" de largura de cada jogo */
body.jogo-ampliado .domino:where(.domino){ max-width:none; }
/* no ampliado, o achar limita pela ALTURA da tela — vale em QUALQUER
   dispositivo (computador, celular em pé e deitado): a foto (proporção
   1376×768) + barra do jogo + placar + lista (~170px) cabem numa tela só,
   sem rolar. (vh primeiro, dvh depois — o dvh cobre os navegadores novos) */
body.jogo-ampliado .achar{
  max-width:calc((100vh - 280px) * 1.7917);
  max-width:calc((100dvh - 280px) * 1.7917);
}
/* no ampliado, o título e a legenda descansam (a pessoa já está JOGANDO) —
   sobra a foto grande de verdade */
body.jogo-ampliado .achar > h3,
body.jogo-ampliado .achar > p.menor{ display:none; }
body.jogo-ampliado .grade-memoria{ max-width:min(100%, 640px); }
body.jogo-ampliado .quebra-quadro, body.jogo-ampliado .blocos-mesa{ max-width:none; }
/* ---------- paisagem (celular deitado, ampliado ou em tela cheia) ----------
   aproveita a largura: cenas que crescem pela LARGURA ficam limitadas pela
   ALTURA, e a barra do jogo fica mais fina. */
@media (orientation: landscape) and (max-height: 560px){
  body.jogo-ampliado .barra-jogo{ padding:4px 0; gap:6px; }
  body.jogo-ampliado .barra-jogo .btn{ min-height:40px; padding:6px 10px; }
  body.jogo-ampliado .area-jogo{ padding-top:6px; }
  body.jogo-ampliado .paciencia-placar, body.jogo-ampliado .pac-topo{ padding-top:2px; padding-bottom:2px; }
  body.jogo-ampliado .achar{
    max-width:calc((100vh - 140px) * 1.7917);
    max-width:calc((100dvh - 140px) * 1.7917);
  }
}
body.jogo-ampliado .btn-jogo-seta{ min-width:60px; min-height:60px; }
html[data-contraste="1"] body.jogo-ampliado .area-jogo{ border:none; }

/* Memória */
.grade-memoria{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; max-width:560px; margin:0 auto; }
@media (max-width:420px){ .grade-memoria{ grid-template-columns:repeat(3,1fr); } }
.carta-memoria{
  aspect-ratio:1; border-radius:16px; border:2px solid var(--cor-borda);
  background:linear-gradient(145deg,var(--cor-primaria),var(--cor-primaria-escura));
  font-size:2.4rem; display:grid; place-items:center; color:#fff;
  box-shadow:0 4px 0 rgba(0,0,0,.2); transition:transform .15s;
}
.carta-memoria:hover{ transform:scale(1.03); }
.carta-memoria.virada,.carta-memoria.par{
  background:#fff; color:inherit; border-color:var(--cor-borda);
}
.carta-memoria.par{ background:#E2F6EA; border-color:var(--cor-sucesso); animation:acerto .4s ease; }
@keyframes acerto{ 0%{transform:scale(1);} 50%{transform:scale(1.12);} 100%{transform:scale(1);} }

/* Quiz */
.pergunta-quiz{ font-size:1.3rem; font-weight:800; margin-bottom:16px; line-height:1.4; }
.opcao-quiz{
  display:block; width:100%; text-align:left; margin-bottom:10px;
  border:2px solid var(--cor-borda); background:#fff; border-radius:14px;
  padding:14px 18px; font-size:1.05rem; min-height:56px; transition:background .2s;
}
.opcao-quiz:hover{ background:var(--cor-primaria-clara); }
.opcao-quiz.certa{ background:#E2F6EA; border-color:var(--cor-sucesso); font-weight:800; }
.opcao-quiz.errada{ background:#FDE8E8; border-color:var(--cor-alerta); }
.explicacao-quiz{ margin-top:14px; padding:14px; border-radius:12px; background:var(--cor-info); color:#fff; font-size:1rem; }
html[data-contraste="1"] .explicacao-quiz{ background:#000; }

/* Caça-palavras */
.grade-caca{
  display:grid; gap:6px; max-width:520px; margin:0 auto; touch-action:manipulation;
}
.letra-caca{
  aspect-ratio:1; border:1px solid var(--cor-borda); border-radius:8px;
  background:#fff; font-size:clamp(.95rem,2.6vw,1.35rem); font-weight:800;
  display:grid; place-items:center; color:var(--cor-texto);
  padding:0; transition:background .1s; min-width:34px;
}
.letra-caca:hover{ background:var(--cor-destaque-clara); }
.letra-caca.selecionada{ background:var(--cor-destaque); color:#fff; border-color:var(--cor-destaque-escura); }
.letra-caca.achada{ background:var(--cor-sucesso); color:#fff; border-color:var(--cor-sucesso); }
.lista-palavras{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.palavra-item{
  padding:8px 16px; border-radius:999px; background:var(--cor-fundo);
  border:2px dashed var(--cor-borda); font-weight:700;
}
.palavra-item.achada{ background:#E2F6EA; border:2px solid var(--cor-sucesso); text-decoration:line-through; }
.aviso-caca{ text-align:center; color:var(--cor-texto-suave); margin-bottom:12px; }

/* Provérbios */
.proverbio-frase{ font-size:clamp(1.25rem,3vw,1.6rem); font-weight:800; text-align:center; margin:10px 0 22px; line-height:1.4; }

/* ---------- 12b. Sudoku ---------- */
.caixa-sudoku{ max-width:600px; margin:0 auto; }
.grade-sudoku{
  display:grid; grid-template-columns:repeat(9,1fr);
  border:3px solid #22303C; border-radius:8px; overflow:hidden;
  max-width:520px; margin:0 auto; background:#22303C;
}
.celula-sudoku{
  aspect-ratio:1; min-width:0; background:#fff; border:none;
  font-size:clamp(1.15rem,4.5vw,1.9rem); font-weight:700;
  color:var(--cor-texto); display:flex; align-items:center; justify-content:center; padding:0;
}
.celula-sudoku.dado{ color:#243342; font-weight:800; }
.celula-sudoku.dado.vazio{ color:#B8C4CD; font-weight:400; }
.celula-sudoku.preenchida{ color:var(--cor-info); }
.celula-sudoku.conflito{ background:#FDE8E8 !important; color:var(--cor-alerta) !important; }
.celula-sudoku.selecionada{ box-shadow:inset 0 0 0 3px var(--cor-destaque); }
.hitori-grade{
  display:grid; gap:3px; max-width:520px; margin:10px auto 0;
  background:#22303C; border:3px solid #22303C; border-radius:10px; padding:3px;
}
.hitori-cel{
  position:relative; aspect-ratio:1; min-width:0; background:#fff; border:none; border-radius:4px;
  font-size:clamp(1.1rem,4.5vw,1.8rem); font-weight:800; color:var(--cor-texto);
  display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer;
  transition:background .12s;
}
.hitori-cel.pintada{ background:#22303C; color:transparent; }
.hitori-cel.marcada{ background:#EAF2FB; }
.hitori-cel.marcada::after{
  content:"●"; position:absolute; right:3px; bottom:2px;
  font-size:.55em; line-height:1; color:var(--cor-primaria);
}
.hitori-cel.erro{ outline:3px solid var(--cor-alerta); outline-offset:-3px; }
/* Hitori gigante (Imenso 15×15 / Gigante 20×20 / Colossal 30×30): casas menores pra caber na tela */
.hitori-grade.hg-gg{ max-width:min(96vw,1000px); gap:2px; border-width:2px; padding:2px; }
.hitori-grade.hg-gg .hitori-cel{ border-radius:2px; font-size:clamp(.58rem,1.5vw,.95rem); font-weight:700; }
.hitori-grade.hg-gg .hitori-cel.marcada::after{ right:1px; bottom:0; font-size:.5em; }
.hitori-grade.hg-gg .hitori-cel.erro{ outline-width:2px; outline-offset:-2px; }

/* Kakuro — cruzadinha de somar (carimbo dv) */
.kakuro-grade{
  display:grid; gap:2px; max-width:min(96vw,620px); margin:10px auto 0;
  background:#22303C; border:3px solid #22303C; border-radius:10px; padding:2px;
}
.kakuro-cel{
  position:relative; aspect-ratio:1; min-width:0; background:#fff; border:none; border-radius:4px;
  font-size:clamp(1.2rem,4.2vw,1.9rem); font-weight:800; color:var(--cor-texto);
  display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer;
  transition:background .12s;
}
.kakuro-cel.dada{ background:#EAF2FB; color:var(--cor-info); cursor:default; }
.kakuro-cel.sel{ background:#FFF3C9; outline:3px solid var(--cor-primaria); outline-offset:-3px; }
.kakuro-cel.erro{ outline:3px solid var(--cor-alerta); outline-offset:-3px; }
.kakuro-pista{
  position:relative; aspect-ratio:1; border-radius:4px; color:#F4F1DE; font-weight:800;
  background:linear-gradient(to top right, #22303C 0%, #22303C calc(50% - 1px), #5A6E7F calc(50% - 1px), #5A6E7F calc(50% + 1px), #22303C calc(50% + 1px), #22303C 100%);
}
.kakuro-pista .kp-dir{ position:absolute; top:2px; right:3px; font-size:clamp(.6rem,2vw,.85rem); line-height:1; }
.kakuro-pista .kp-bai{ position:absolute; bottom:2px; left:3px; font-size:clamp(.6rem,2vw,.85rem); line-height:1; }

/* Xadrez — reis e rainhas (carimbo dw) */
.xw-grade{
  display:grid; grid-template-columns:repeat(8,1fr); gap:0;
  max-width:min(96vw,640px); margin:8px auto 0;
  border:4px solid #5B3A1E; border-radius:10px; overflow:hidden;
}
.xw-casa{
  position:relative; aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-size:clamp(1.5rem,7vw,2.7rem); cursor:pointer; border:none; padding:0;
  user-select:none; -webkit-user-select:none;
}
.xw-casa.cl{ background:#F3E6CF; }
.xw-casa.es{ background:#B98A5E; }
.xw-casa.ult{ background-image:linear-gradient(rgba(255,236,150,.55),rgba(255,236,150,.55)); }
.xw-casa.sel{ outline:4px solid var(--cor-primaria); outline-offset:-4px; }
.xw-casa.xeq{ background-image:linear-gradient(rgba(224,82,82,.45),rgba(224,82,82,.45)); }
.xw-casa.alvo::after{
  content:""; position:absolute; width:26%; height:26%; border-radius:50%;
  background:rgba(43,93,142,.45); pointer-events:none;
}
.xw-casa.alvocap::after{
  content:""; position:absolute; inset:6%; border-radius:50%;
  border:4px solid rgba(224,82,82,.75); pointer-events:none;
}
.xw-pc{ line-height:1; pointer-events:none; }
.xw-pc.pb{ color:#FAFAF7; text-shadow:0 0 3px rgba(20,20,20,.9), 0 0 1px #000; }
.xw-pc.pp{ color:#23201C; text-shadow:0 0 2px rgba(255,255,255,.35); }
.xw-coord{ position:absolute; font-size:.62rem; font-weight:800; opacity:.75; pointer-events:none; }
.xw-letra{ right:2px; bottom:1px; }
.xw-num{ left:2px; top:1px; }
.xw-casa.dica{ outline:4px dashed #2B8A3E; outline-offset:-4px; }
.xw-ajuda{ max-width:min(96vw,640px); margin:10px auto 0; padding:10px 14px; text-align:left;
  font-size:.95rem; line-height:1.55; background:rgba(43,93,142,.08);
  border:1px solid rgba(43,93,142,.3); border-radius:10px; }
.xw-ajuda p{ margin:6px 0; }
.xw-ajuda b{ color:var(--cor-primaria); }
.btn:disabled{ opacity:.5; cursor:default; }
.jogo-pasta-mini{ display:block; font-size:1.45rem; letter-spacing:3px; line-height:1.5; margin:2px 0 4px; }

/* 🛍️ Vitrine da home (carimbo eb) — carrossel com os produtos da aba Compras */
.vitrine-topo{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.vitrine-ver-tudo{ font-weight:800; color:var(--cor-primaria); text-decoration:none; padding:8px 6px; min-height:44px; display:inline-flex; align-items:center; }
.vitrine-corpo{ position:relative; display:flex; align-items:center; gap:8px; }
/* (carimbo ed) vitrine COMPACTA: mesma largura dos outros cartões, menos
   altura — foto mais baixinha, letras e botão menores (pedido do dono). */
.vitrine-trilho{
  display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 2px 8px; -webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
.vitrine-card{
  flex:0 0 min(72vw, 240px); scroll-snap-align:start; background:#fff;
  border:1px solid var(--cor-borda); border-radius:14px; padding:9px;
  display:flex; flex-direction:column; gap:6px;
}
.vitrine-img-wrap{ border-radius:10px; overflow:hidden; background:var(--cor-primaria-clara); aspect-ratio:2/1; display:grid; place-items:center; }
.vitrine-img{ width:100%; height:100%; object-fit:cover; display:block; }
.vitrine-img-fallback{ font-size:2.1rem; }
.vitrine-card h3{ font-size:.95rem; margin:0; line-height:1.25; }
.vitrine-card p{ font-size:.8rem; margin:0; color:var(--cor-texto-suave); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vitrine-card .compras-cta{ margin-top:auto; min-height:40px; padding:7px 10px; font-size:.85rem; }
.vitrine-seta{
  flex:0 0 auto; width:52px; height:52px; border-radius:50%; border:none; cursor:pointer;
  background:var(--cor-primaria); color:#fff; font-size:2rem; line-height:1; font-weight:800;
  box-shadow:var(--sombra-suave); display:grid; place-items:center;
}
.vitrine-seta:hover{ background:var(--cor-primaria-escura); }
.vitrine-aviso{ margin:8px 0 0; }
.vitrine-aviso a{ color:var(--cor-primaria); font-weight:700; }
@media (max-width:520px){
  .vitrine-seta{ display:none; } /* no celular: deslizar com o dedo */
  .vitrine-card{ flex-basis:74vw; }
}
@media (prefers-reduced-motion: reduce){
  .vitrine-trilho{ scroll-behavior:auto; }
}
.teclado-sudoku{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:18px auto 0; max-width:560px; }
.tecla-numero{
  width:56px; height:56px; font-size:1.45rem; font-weight:800;
  border-radius:12px; border:2px solid var(--cor-borda); background:#fff; color:var(--cor-texto);
}
.tecla-numero:hover{ background:var(--cor-primaria-clara); }
.tecla-numero.ativa{
  background:var(--cor-destaque); color:#fff; border-color:var(--cor-destaque);
  box-shadow:0 0 0 3px rgba(255,183,0,.35);
}
html[data-contraste="1"] .tecla-numero.ativa{ background:#000; border-color:#fff; color:#fff; }
.aviso-sudoku{
  margin:10px auto 0; max-width:520px; text-align:center;
  color:var(--cor-texto-suave); font-size:.95rem; line-height:1.5;
}
.aviso-sudoku b{ color:var(--cor-primaria-escura); }
.linha-acoes-sudoku{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:16px; }

/* ---------- 12c. Detetive (estilo Murdoku) ---------- */
.caso-misterio .elenco{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 16px; }
.ficha-elenco{
  position:relative; border:2px solid var(--cor-borda); border-radius:12px; background:#fff;
  padding:8px 12px; min-width:130px; text-align:center;
  font-family:inherit; cursor:pointer; transition:transform .12s ease, background .15s, border-color .15s;
}
.ficha-elenco:hover{ transform:translateY(-2px); border-color:var(--cor-primaria); }
.ficha-elenco:active{ transform:translateY(0); }
.ficha-elenco .e{ font-size:1.6rem; display:block; }
.ficha-elenco b{ display:block; font-size:.98rem; color:var(--cor-texto); }
.ficha-elenco small{ color:var(--cor-texto-suave); font-size:.8rem; }
.ficha-elenco .selo{ position:absolute; top:-10px; right:-8px; font-size:1.15rem; line-height:1; }
/* descartada: riscada e apagada */
.ficha-elenco.descartada{ background:#F1F3F5; border-style:dashed; opacity:.62; }
.ficha-elenco.descartada b{ text-decoration:line-through; color:#7A8794; }
.ficha-elenco.descartada small{ color:#9AA6B0; }
/* marcada (suspeita principal / identificada) */
.ficha-elenco.marcada{ border-color:var(--cor-sucesso); background:#EAF7EF; }
html[data-contraste="1"] .ficha-elenco{ background:#fff; border-color:#000; }
html[data-contraste="1"] .ficha-elenco.descartada{ opacity:.55; }
html[data-contraste="1"] .ficha-elenco.marcada{ border-color:#000; box-shadow:0 0 0 3px #000; }
.pista-item{
  display:flex; gap:12px; align-items:flex-start;
  background:#FFFBF0; border:1px dashed var(--cor-borda); border-radius:12px;
  padding:14px 16px; margin:0 0 12px;
}
html[data-contraste="1"] .pista-item{ background:#fff; }
.pista-item .num{
  flex:none; width:38px; height:38px; border-radius:50%; background:var(--cor-destaque);
  color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.pista-item p{ flex:1; }
.caderno{
  background:#F4F6F3; border:2px solid var(--cor-borda); border-radius:14px; padding:16px; margin-top:14px;
  font-family:"Courier New",monospace; font-size:.98rem; line-height:1.7;
}
html[data-contraste="1"] .caderno{ background:#fff; }

/* ---------- 12e. Palavras cruzadas ---------- */
.cruzada-wrap{ display:flex; flex-direction:column; gap:18px; }
@media (min-width:900px){ .cruzada-wrap{ flex-direction:row; align-items:flex-start; } }
.cruzada-tabuleiro{ flex:1 1 60%; max-width:600px; }
.grade-cruzada{
  display:grid; border:3px solid #22303C; border-radius:6px; overflow:hidden;
  background:#22303C; gap:1px; max-width:540px; margin:0 auto;
}
/* cada quadradinho da cruzada: a célula é a própria "caixa" do grid */
.cx-cel{
  position:relative; aspect-ratio:1/1; min-width:0; min-height:0;
  background:#fff; display:flex; align-items:center; justify-content:center;
}
.cx-cel.preta{ background:#22303C; }
html[data-contraste="1"] .cx-cel.preta{ background:#000; }
.cx-cel .celula-cruzada{
  width:100%; height:100%; min-width:0;
  background:transparent; border:none; padding:0;
  text-align:center; font-size:clamp(1rem,3.4vw,1.5rem);
  font-weight:700; text-transform:uppercase; color:var(--cor-texto);
}
.cx-cel .celula-cruzada.dada{ background:#EAF3FD; color:#1f2d3a; }
.cx-cel .celula-cruzada.destaque{ background:#FDEBD3 !important; }
.cx-cel .celula-cruzada.mesma{ background:#FFF3DC !important; }
.cx-cel .celula-cruzada.erro{ background:#FDE8E8 !important; color:var(--cor-alerta) !important; }
html[data-contraste="1"] .cx-cel .celula-cruzada.dada{ background:#fff; color:#000; }
/* número da pista no cantinho superior-esquerdo do quadradinho */
.cx-cel .num-cruz{
  position:absolute; top:2px; left:3px; z-index:2;
  font-size:clamp(.55rem,1.6vw,.74rem); font-weight:800;
  color:#5A6B7A; line-height:1; pointer-events:none; user-select:none;
  background:rgba(255,255,255,.55); border-radius:3px; padding:0 2px 1px;
}
html[data-contraste="1"] .cx-cel .num-cruz{ background:#fff; color:#000; }
.cruzada-listas{ flex:1 1 38%; min-width:280px; }
.cruzada-grupo{ background:#fff; border:1px solid var(--cor-borda); border-radius:14px; padding:12px; margin-bottom:14px; }
.cruzada-grupo h4{ font-size:1.05rem; margin-bottom:8px; }
.lista-dica{ width:100%; }
.item-dica{
  display:block; width:100%; text-align:left; border:none; background:transparent;
  border-radius:10px; padding:8px 10px; cursor:pointer; font-size:1rem; line-height:1.45;
}
.item-dica:hover{ background:var(--cor-primaria-clara); }
.item-dica.ativa{ background:var(--cor-destaque-clara); font-weight:700; }
.item-dica.feita{ opacity:.62; text-decoration:line-through; }
.item-dica .nd{ font-weight:800; color:var(--cor-primaria); margin-right:6px; }
.aviso-cruzada{ font-size:.9rem; color:var(--cor-texto-suave); text-align:center; margin:10px 0 0; }
.linha-acoes-cruzada{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:14px; }

/* ---------- 12d. Caça-níqueis ---------- */
.maquina-slot{ max-width:560px; margin:0 auto; text-align:center; }
.maquina-slot .placar-fichas{
  display:inline-block; background:#2b2f36; color:#FFD166; border-radius:999px;
  padding:8px 22px; font-weight:800; font-size:1.05rem; margin-bottom:14px;
}
.reels{
  display:flex; gap:10px; justify-content:center; align-items:stretch;
  background:linear-gradient(#3a3f47,#20242b); border:8px solid #8a6d00; border-radius:18px;
  padding:16px 12px; box-shadow:inset 0 4px 14px rgba(0,0,0,.5);
}
.reel{
  width:88px; height:118px; border-radius:12px; background:linear-gradient(#fff,#F3F1EA);
  display:flex; align-items:center; justify-content:center; font-size:3.4rem;
  box-shadow:inset 0 -10px 20px rgba(0,0,0,.12); border:2px solid #d8d2c0;
  transition:transform .08s;
}
.reel.girando{ animation:chacoalha .12s infinite; }
@keyframes chacoalha{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-4px);} }
.resultado-slot{ min-height:2.6em; font-size:1.35rem; font-weight:800; margin-top:16px; }
.btn-alavanca{
  margin-top:6px; width:100%; font-size:1.5rem; font-weight:800; letter-spacing:.5px;
}
.aviso-slot{ font-size:.85rem; color:var(--cor-texto-suave); margin-top:10px; }
.modal-fundo{
  position:fixed; inset:0; background:rgba(15,23,32,.55); z-index:100;
  display:none; align-items:flex-start; justify-content:center; overflow-y:auto;
  padding:24px 14px 60px;
}
.modal-fundo.aberto{ display:flex; }
.modal{
  background:var(--cor-cartao); border-radius:22px; max-width:780px; width:100%;
  padding:26px; box-shadow:0 20px 60px rgba(0,0,0,.35); margin:auto 0;
  animation:aparecer .25s ease;
}
.modal-topo{ display:flex; align-items:flex-start; gap:10px; margin-bottom:14px; }
.modal-topo h2{ font-size:1.5rem; line-height:1.25; flex:1; }
.modal-corpo{ font-size:1.06rem; }
.modal-corpo p{ margin-bottom:14px; }
.modal-corpo h3{ margin:18px 0 8px; color:var(--cor-primaria-escura); font-size:1.2rem; }
.modal-corpo ul,.modal-corpo ol{ margin:0 0 14px 24px; }
.modal-corpo li{ margin-bottom:8px; }
.btn-fechar{
  flex:none; width:54px; height:54px; border-radius:50%; border:2px solid var(--cor-borda);
  background:#fff; font-size:1.5rem; font-weight:800; color:var(--cor-texto);
  display:grid; place-items:center;
}
.btn-fechar:hover{ background:var(--cor-alerta); color:#fff; border-color:var(--cor-alerta); }

/* ---------- 14. Toasts / avisos / confete ---------- */
#areaToasts{ position:fixed; bottom:90px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; width:min(94vw,520px); }
.toast{
  background:var(--cor-texto); color:#fff; padding:12px 22px; border-radius:999px;
  font-weight:700; font-size:.98rem; box-shadow:0 8px 24px rgba(0,0,0,.3);
  animation:sobe .35s ease; display:flex; gap:8px; align-items:center; text-align:center;
}
html[data-contraste="1"] .toast{ background:#000; border:2px solid #fff; }
.toast.especial{ background:linear-gradient(90deg,#FFB800,#FF7A00); color:#331400; }
@keyframes sobe{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:none;} }

#confete{ position:fixed; inset:0; pointer-events:none; z-index:300; }

/* ---------- 15. Configurações & conquistas ---------- */
.linha-config{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; border-bottom:1px dashed var(--cor-borda); flex-wrap:wrap; }
.linha-config:last-child{ border-bottom:none; }
.linha-config label b{ display:block; }
.linha-config small{ color:var(--cor-texto-suave); }
.campo{
  width:100%; padding:14px 16px; font-size:1.05rem; border-radius:12px;
  border:2px solid var(--cor-borda); background:#fff; color:var(--cor-texto);
}
.campo:focus{ outline:none; border-color:var(--cor-primaria); }
.grupo-capitais{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.instalar-texto{
  margin:0; color:var(--cor-texto-suave); line-height:1.55; font-size:1rem;
}
.instalar-ok{
  background:var(--cor-primaria-clara); border:1px solid var(--cor-primaria);
  border-radius:14px; padding:14px 16px; font-size:1.05rem; line-height:1.55;
  color:var(--cor-primaria-escura);
}
html[data-contraste="1"] .instalar-ok{ background:#fff; border:2px solid #000; color:#000; }
html[data-contraste="1"] .instalar-texto{ color:#000; }
.chip-cidade{
  border:1px solid var(--cor-borda); background:#fff; border-radius:999px;
  padding:10px 16px; font-weight:700;
}
.chip-cidade.selecionada{ background:var(--cor-primaria); color:#fff; border-color:var(--cor-primaria); }

.grade-conquistas{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.conquista{
  border:1px solid var(--cor-borda); border-radius:14px; padding:14px 10px; text-align:center;
  background:var(--cor-fundo); opacity:.5;
}
.conquista.ganha{ opacity:1; background:#fff; border-color:var(--cor-destaque); box-shadow:var(--sombra-suave); }
.conquista .emoji{ font-size:2rem; }
.conquista b{ display:block; font-size:.88rem; margin:6px 0 2px; }
.conquista small{ color:var(--cor-texto-suave); font-size:.76rem; line-height:1.3; display:block; }

/* ---------- 16. Anúncios ---------- */
.slot-anuncio{ margin:22px auto; max-width:760px; }
.slot-anuncio:empty{ display:none; margin:0; } /* espaço sem anúncio não deixa buraco */
.slot-anuncio .rotulo-anuncio{
  text-align:center; font-size:.72rem; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--cor-texto-suave); margin-bottom:6px;
}
.ad-placeholder{
  border:2px dashed var(--cor-borda); border-radius:14px; background:rgba(255,255,255,.55);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; color:var(--cor-texto-suave); text-align:center; padding:14px;
}
.ad-placeholder[data-formato="leaderboard"]{ min-height:100px; }
.ad-placeholder[data-formato="retangulo"]{ min-height:250px; }
.ad-placeholder[data-formato="rodape"]{ min-height:120px; }
.ad-placeholder .big{ font-size:1.3rem; }
html[data-contraste="1"] .ad-placeholder{ background:#fff; }

/* ---------- 17. Rodapé ---------- */
.rodape{
  border-top:1px solid var(--cor-borda); background:var(--cor-cartao);
  margin-top:40px; padding:26px 0; color:var(--cor-texto-suave); font-size:.9rem;
}
.rodape-inner{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; justify-content:space-between; max-width:1120px; margin:0 auto; padding:0 var(--espaco); }
.rodape b{ color:var(--cor-texto); }

/* ---------- 17a2. Badge do painel (✉️ Mensagens novas) ---------- */
.badge-contador{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1.3rem; height:1.3rem; padding:0 .3rem;
  background:var(--cor-alerta); color:#fff; font-size:.82rem; font-weight:800;
  border-radius:999px; margin-left:4px; vertical-align:middle;
}
html[data-contraste="1"] .badge-contador{ background:#000; border:1px solid #fff; }

/* ---------- 17b. Pulso de pontos ---------- */
#chipPts{ display:inline-block; font-size:1.4rem; }
#chipPts.pulso{ animation:pulsoPts .55s ease; }
@keyframes pulsoPts{ 0%,100%{ transform:scale(1);} 40%{ transform:scale(1.3);} }

/* ---------- 17d. Botão WhatsApp ---------- */
.btn-zap{
  background:#25D366; color:#fff !important; border-radius:14px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; font-weight:800; font-size:1.02rem; text-decoration:none;
  padding:15px 24px; min-height:56px; transition:filter .15s, transform .1s;
}
.btn-zap:hover{ filter:brightness(1.07); }
.btn-zap:active{ transform:scale(.97); }

/* ---------- 17d2. QR Code para compartilhar o site ---------- */
.qr-site{
  display:flex; justify-content:center; margin:14px 0;
}
.qr-site img{
  width:240px; height:240px; background:#fff;
  border:4px solid var(--cor-primaria); border-radius:18px;
  box-shadow:var(--sombra-suave); padding:8px;
}
html[data-contraste="1"] .qr-site img{ border-color:#000; }

/* ---------- 17e. Copo d'água ---------- */
.area-agua .cabeca{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-bottom:8px;
}
.area-agua .barra{
  height:16px; background:#E9E4DA; border-radius:99px; overflow:hidden; margin:10px 0 14px;
}
.area-agua .barra i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,#7CC6FE,#2F6FD0); border-radius:99px; transition:width .4s ease;
}
.copos{ display:flex; gap:8px; justify-content:space-between; max-width:600px; }
.copo{
  flex:1; max-width:64px; height:72px; padding:0; border:none; background:transparent;
  position:relative;
}
.copo .vaso{
  position:absolute; inset:0; border:3px solid var(--cor-info); border-top:none;
  border-radius:6px 6px 14px 14px; background:#fff; overflow:hidden;
}
html[data-contraste="1"] .copo .vaso{ border-color:#000; background:#fff; }
.copo .nivel{
  position:absolute; left:0; right:0; bottom:0; height:0%;
  background:linear-gradient(180deg,#7CC6FE,#2F6FD0); transition:height .45s ease;
}
.copo .gotas{ position:absolute; top:-26px; left:50%; transform:translateX(-50%); font-size:1.4rem; opacity:0; }
.copo.cheio .gotas{ animation:caiGota 1.6s ease infinite; opacity:1; }
@keyframes caiGota{ 0%,100%{ transform:translate(-50%,0); opacity:0; } 15%{opacity:1;} 80%{ transform:translate(-50%,14px); opacity:0; } }
.copo .ml{ position:absolute; bottom:2px; left:0; right:0; text-align:center; font-size:.6rem; font-weight:800; color:var(--cor-info); }
html[data-contraste="1"] .copo .ml{ color:#000; }
.copo[aria-disabled="true"]{ cursor:default; }
.meta-agua{ font-weight:800; color:var(--cor-info); }

/* ---------- 17f. Código de progresso ---------- */
.caixa-codigo{
  background:var(--cor-fundo); border:2px dashed var(--cor-primaria);
  border-radius:14px; padding:14px; font-family:"Courier New",monospace;
  font-size:1.15rem; font-weight:800; letter-spacing:1.5px; line-height:1.7;
  word-break:break-all; user-select:all; margin:12px 0;
}
html[data-contraste="1"] .caixa-codigo{ background:#fff; border:2px dashed #000; }
.fileira-botoes{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- 17g. Controles de voz ---------- */
.linha-volume{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.linha-volume input[type="range"]{ width:170px; height:34px; accent-color:var(--cor-primaria); }
.acoes-modal{ display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.acoes-modal .fileira{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* ---------- 18b. Benefícios das receitas ---------- */
.beneficios{ display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
.chip-beneficio{
  font-size:.78rem; background:var(--cor-primaria-clara); color:var(--cor-primaria-escura);
  padding:3px 10px; border-radius:999px; font-weight:700; letter-spacing:.2px;
}
html[data-contraste="1"] .chip-beneficio{ border:1px solid #000; background:#fff; color:#000; }

/* ---------- 18c. Ajuda rápida / telefones ---------- */
.linha-telefone{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:9px 2px; border-bottom:1px dashed var(--cor-borda);
}
.linha-telefone:last-child{ border-bottom:none; }
.linha-telefone .nome{ font-weight:700; flex:1 1 170px; }
.linha-telefone small{ display:block; color:var(--cor-texto-suave); font-size:.85rem; font-weight:400; }
.botao-ligar{
  background:var(--cor-sucesso); color:#fff !important; border-radius:999px;
  padding:9px 20px; text-decoration:none; font-weight:800; font-size:1.05rem;
  white-space:nowrap; transition:filter .15s;
}
.botao-ligar:hover{ filter:brightness(1.1); }
/* 💬 WhatsApp direto no cartão da família (carimbo ds) — pílula verde irmã do botao-ligar */
.botao-zap{
  background:#25D366; color:#fff !important; border-radius:999px;
  padding:9px 20px; text-decoration:none; font-weight:800; font-size:1.05rem;
  white-space:nowrap; transition:filter .15s;
}
.botao-zap:hover{ filter:brightness(1.1); }
/* 🏛️ links para sites oficiais (carimbo dj) */
.botao-oficial{
  display:inline-block; background:var(--cor-info, #1976D2); color:#fff !important;
  border-radius:999px; padding:10px 18px; text-decoration:none; font-weight:800;
  font-size:1.02rem; white-space:nowrap; transition:filter .15s;
}
.botao-oficial:hover{ filter:brightness(1.12); }
.linha-oficial small{ display:block; margin-top:2px; }

/* 👨‍👩‍👧 Família + cofre pessoal (carimbo dk) */
.form-familia .campo{ width:100%; min-height:52px; font-size:1.05rem; }
.form-familia .rotulo-grande{ display:block; margin:12px 0 6px; font-size:1.05rem; }
.form-familia .rotulo-grande small{ display:block; color:var(--cor-texto-suave); font-weight:400; font-size:.92rem; margin-top:2px; }
.contato-familia{
  background:#fff; border:2px solid var(--cor-borda); border-radius:16px;
  padding:14px 16px; margin:10px 0; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.contato-familia .dados{ flex:1 1 200px; min-width:0; }
.contato-familia .dados b{ font-size:1.15rem; }
.contato-familia .dados small{ display:block; color:var(--cor-texto-suave); margin-top:2px; }
.contato-familia .acoes{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.btn-excluir-pequeno{
  background:none; border:2px solid var(--cor-alerta); color:var(--cor-alerta);
  border-radius:12px; padding:10px 14px; font-weight:700; min-height:48px; cursor:pointer;
}
html[data-contraste="1"] .contato-familia{ border-color:#000; }
html[data-contraste="1"] .btn-excluir-pequeno{ border-color:#000; color:#000; }

/* 👤 MINHA VIDA — seções do cofre pessoal (carimbo dl) */
.vida-chips{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:14px 0 4px; }
.vida-chip{
  display:inline-flex; align-items:center; gap:6px; background:#fff;
  border:2px solid var(--cor-borda); border-radius:999px; padding:9px 14px;
  font-weight:700; cursor:pointer; min-height:44px; font-size:.95rem;
}
.vida-chip:hover{ border-color:var(--cor-primaria); background:var(--cor-primaria-clara); }
.secao-vida{ border-left:6px solid var(--cor-primaria); scroll-margin-top:90px; }
.secao-vida .ajuda-secao{ color:var(--cor-texto-suave); margin-top:4px; }
.secao-vida .aviso-secao{
  background:#FFF8E1; border:2px dashed #F0C36D; border-radius:12px;
  padding:10px 12px; margin:10px 0; font-size:.98rem; line-height:1.5;
}
.vida-item{
  background:var(--cor-fundao, #fff); border:2px solid var(--cor-borda);
  border-radius:14px; padding:12px 14px; margin:8px 0;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.vida-item .textoitem{ flex:1 1 200px; min-width:0; line-height:1.45; }
.vida-item .textoitem b{ font-size:1.1rem; }
.vida-item .marcador{
  font-weight:800; font-size:1rem; white-space:nowrap;
  padding:6px 12px; border-radius:999px;
}
.vida-item .marcador.bom{ background:#E8F5E9; color:#1B5E20; }
.vida-item .marcador.atencao{ background:#FFF8E1; color:#7A5800; }
.vida-item .marcador.urgente{ background:#FDECEA; color:#B3261E; }
.vida-item .marcador.neutro{ background:var(--cor-borda); color:var(--cor-texto-suave); }
.vida-item.feito-hj{ border-color:#8FCCA0; background:#F4FBF6; }
.vida-item.pego{ opacity:.65; text-decoration:line-through; }
.vida-item .acao{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}
.vida-item .acao .btn{ min-height:48px; padding:9px 16px; font-weight:800; }
.campos-vida .campo{ width:100%; min-height:52px; font-size:1.05rem; }
.campos-vida .rotulo-grande{ display:block; margin:12px 0 6px; font-size:1.05rem; }
.campos-vida .rotulo-grande small{ display:block; color:var(--cor-texto-suave); font-weight:400; font-size:.92rem; margin-top:2px; }
.saldo-dia{
  display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin:10px 0;
}
.saldo-dia .caixinha{
  border-radius:14px; padding:10px 18px; text-align:center; font-weight:800;
  min-width:120px; border:2px solid var(--cor-borda); background:#fff; font-size:1.05rem;
}
.saldo-dia .caixinha.mais{ background:#E8F5E9; border-color:#8FCCA0; color:#1B5E20; }
.saldo-dia .caixinha.menos{ background:#FDECEA; border-color:#E5948C; color:#B3261E; }
.carteirinha-vive{
  border:3px solid var(--cor-info, #1976D2); border-radius:18px; padding:16px;
  background:#fff; margin-top:10px;
}
.carteirinha-vive h3{ margin-top:0; color:var(--cor-info, #1976D2); }
.carteirinha-vive .linha{ padding:7px 0; border-bottom:1px dashed var(--cor-borda); display:flex; gap:8px; flex-wrap:wrap; }
.carteirinha-vive .linha:last-child{ border-bottom:none; }
html[data-contraste="1"] .vida-chip, html[data-contraste="1"] .vida-item{ border-color:#000; }

/* 🆘 grupos de telefones no modal SOS (carimbo dh) */
.sos-grupo{ font-size:1.08rem; margin:14px 0 4px; }
.sos-grupo:first-child{ margin-top:2px; }

/* ============================================================
   🛡️ PROTEJA-SE — central anti-golpe (carimbo dg)
   ============================================================ */
.caixa-golpe{
  width:100%; min-height:110px; resize:vertical; font:inherit; font-size:1.05rem;
  line-height:1.5; padding:14px; border:2px solid var(--cor-borda); border-radius:14px;
  background:#fff; color:var(--cor-texto);
}
.caixa-golpe:focus{ outline:3px solid var(--cor-primaria-clara); border-color:var(--cor-primaria); }
.resultado-golpe:empty{ display:none; }
.golpe-resposta{
  border-radius:18px; padding:16px; margin-top:14px; border:2px solid;
  font-size:1.02rem; line-height:1.55;
}
.golpe-resposta.vazio{ background:#FFF8E1; border-color:#F0C36D; }
.golpe-resposta.atencao{ background:#FDECEA; border-color:#E33D2E; }
.golpe-resposta.neutro{ background:#FFF8E1; border-color:#F0C36D; }
.golpe-resposta .grande{ font-size:1.2rem; }
.sinal-item{
  background:#fff; border:1px solid var(--cor-borda); border-radius:14px;
  padding:12px 14px; margin:8px 0;
}
.sinal-item b{ font-size:1.08rem; }
.sinal-item small{
  display:block; color:var(--cor-texto-suave); font-style:italic; margin:2px 0 6px;
}
.sinal-item p{ margin:0; }
.golpe-o-que-fazer{
  background:#fff; border-radius:14px; padding:12px 14px; margin-top:10px;
  border:2px dashed var(--cor-borda);
}
.golpe-o-que-fazer ol, .golpe-resposta.neutro ul{ margin:6px 0 0; padding-left:22px; }
.golpe-o-que-fazer li, .golpe-resposta.neutro li{ margin:6px 0; }
.tel-digitar{ display:block; margin-top:2px; }
.golpe-cartao{ border-left:6px solid var(--cor-alerta); }
.golpe-rotulo{ font-weight:800; margin:10px 0 4px; }
.golpe-lista{ margin:0 0 6px; padding-left:22px; }
.golpe-lista li{ margin:4px 0; }
.golpe-regras{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:8px; }
@media (max-width:700px){ .golpe-regras{ grid-template-columns:1fr; } }
.golpe-caixa{ border-radius:16px; padding:12px 14px; }
.golpe-caixa.nao{ background:#FDECEA; border:2px solid #E5948C; }
.golpe-caixa.sim{ background:#E8F5E9; border:2px solid #8FCCA0; }
.golpe-caixa ul{ margin:4px 0 0; padding-left:22px; }
.golpe-caixa li{ margin:6px 0; }
.golpe-caixa.nao .golpe-rotulo{ margin-top:0; color:#B3261E; }
.golpe-caixa.sim .golpe-rotulo{ margin-top:0; color:#1B5E20; }
html[data-contraste="1"] .golpe-caixa.nao{ background:#fff; border-color:#B3261E; }
html[data-contraste="1"] .golpe-caixa.sim{ background:#fff; border-color:#1B5E20; }

/* ---------- 18d. Diversos (continua) ---------- */
.dica-humor{
  display:flex; gap:12px; background:#fff; border:1px dashed var(--cor-borda);
  border-radius:14px; padding:14px 16px; margin:10px 0; align-items:flex-start;
}
.centro{ text-align:center; }
.espaco-baixo{ margin-bottom:18px; }
.menor{ font-size:.9rem; }
.destaque-frase{ font-size:1.15rem; font-weight:700; color:var(--cor-primaria-escura); }
.tag-resultado{ font-size:1.4rem; font-weight:800; text-align:center; margin:18px 0; }

/* ---------- 15. Formulários e receitas da comunidade ---------- */
.rotulo-campo{ display:block; font-weight:800; margin:14px 0 6px; font-size:1.02rem; }
.campo-texto{
  width:100%; box-sizing:border-box; font:inherit; font-size:1.08rem;
  padding:12px 14px; border:2px solid var(--cor-borda); border-radius:12px;
  background:#fff; color:var(--cor-texto); min-height:52px;
}
select.campo-texto{ appearance:auto; }
textarea.campo-texto{ min-height:110px; resize:vertical; line-height:1.55; }
.campo-texto:focus{ outline:none; border-color:var(--cor-primaria); box-shadow:0 0 0 3px var(--cor-primaria-clara); }
html[data-contraste="1"] .campo-texto{ background:#fff; color:#000; border-color:#000; }
.moderacao-item{
  background:#fff; border:1px solid var(--cor-borda); border-radius:14px;
  padding:12px 14px; margin-bottom:12px;
}
.moderacao-item h3{ font-size:1.08rem; margin:0 0 4px; }
.moderacao-item .menor{ margin:2px 0 4px; }
html[data-contraste="1"] .moderacao-item{ background:#fff; border-color:#000; }
.moderacao-item .passo-titulo{ font-weight:800; color:var(--cor-primaria-escura); margin:12px 0 2px; }
.moderacao-item .pre-linhas{ white-space:pre-line; line-height:1.55; }
/* ---------- Painel do dono (/painel) ---------- */
.painel{ display:flex; gap:18px; align-items:flex-start; margin-top:18px; }
.painel-lado{
  flex:0 0 210px; display:flex; flex-direction:column; gap:6px;
  position:sticky; top:12px; background:#fff; border:1px solid var(--cor-borda);
  border-radius:14px; padding:10px; box-shadow:var(--sombra, 0 2px 8px rgba(0,0,0,.05));
}
.painel-aba{
  display:block; width:100%; text-align:left; min-height:48px; padding:10px 14px;
  font-size:1.05rem; font-weight:700; border:none; border-radius:10px; cursor:pointer;
  background:transparent; color:var(--cor-texto);
}
.painel-aba:hover{ background:var(--cor-primaria-clara); }
.painel-aba.ativa{ background:var(--cor-primaria); color:#fff; }
.painel-sair{ margin-top:12px; display:block; width:100%; min-height:48px; padding:10px 14px;
  font-size:1rem; font-weight:700; border:1px solid var(--cor-borda); border-radius:10px;
  cursor:pointer; background:#E9E4DA; color:var(--cor-texto); }
.painel-sair:hover{ filter:brightness(1.05); }
.painel-corpo{ flex:1; min-width:0; background:#fff; border:1px solid var(--cor-borda); border-radius:14px; padding:20px; }
.painel-titulo{ font-size:1.35rem; margin:0 0 14px; }
@media (max-width:760px){
  .painel{ flex-direction:column; }
  .painel-lado{ flex:1 1 auto; width:100%; position:static; flex-direction:row; flex-wrap:wrap; }
  .painel-aba{ width:auto; flex:1 1 auto; text-align:center; }
  .painel-sair{ width:auto; margin-top:0; }
}
.mod-abas{ flex-wrap:wrap; row-gap:8px; }


/* ---------- 16. Quebra-Cabeça de Fotos ---------- */
.quebra{ text-align:center; max-width:680px; margin:0 auto; }
.quebra-preview img{
  width:190px; height:190px; object-fit:cover; border-radius:16px;
  border:3px solid var(--cor-borda); box-shadow:var(--sombra-suave);
  display:block; margin:10px auto 0;
}
html[data-contraste="1"] .quebra-preview img{ border-color:#000; }
.quebra-status{ margin:12px auto 0; min-height:1.5em; max-width:560px; color:var(--cor-texto-suave); }
.quebra-moldura{
  position:relative; max-width:min(92vw,520px); margin:14px auto 0;
  touch-action:manipulation;
}
.quebra-canvas{
  width:100%; height:auto; display:block;
  border-radius:14px; border:3px solid var(--cor-borda);
  box-shadow:var(--sombra); background:#fff;
}
.quebra-grade{
  position:absolute; inset:0;
  display:grid; gap:0;
}
.quebra-peca{
  border:0; padding:0; margin:0; background:transparent; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  border-radius:6px;
}
.quebra-peca:hover{ box-shadow:inset 0 0 0 3px rgba(255,255,255,.55); }
.quebra-peca.quebra-sel{
  box-shadow:inset 0 0 0 5px var(--cor-destaque);
  background:rgba(255,255,255,.06);
}
html[data-contraste="1"] .quebra-peca.quebra-sel{ box-shadow:inset 0 0 0 5px #000; background:#fff; }
.quebra-modal{
  position:fixed; inset:0; background:rgba(0,0,0,.78); z-index:300;
  display:flex; align-items:center; justify-content:center; padding:18px;
}
.quebra-modal-box{ text-align:center; max-width:min(94vw,620px); }
.quebra-modal-box img{
  width:100%; border-radius:12px; border:3px solid #fff;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}

/* ---------- 17. Quebra-Cabeça — peças de verdade (encaixe) ---------- */
.pj{ text-align:center; }
.pj-barra{ margin-bottom:2px; }
.pj-scroll{
  max-height:76vh; overflow:auto; margin-top:10px;
  border:2px solid var(--cor-borda); border-radius:16px;
  background:#E9E2D6; background-image:repeating-linear-gradient(45deg,#EFE9E0 0 14px,#E9E2D6 14px 28px);
  touch-action:pan-x pan-y;
}
.pj-escala{ position:relative; }
.pj-mesa{ position:relative; transform-origin:0 0; }
.pj-tabuleiro{
  position:absolute; border-radius:12px;
  background:#fff; box-shadow:inset 0 0 0 3px rgba(15,123,95,.35);
  overflow:hidden;
}
.pj-tab-fundo{ border-radius:12px; }
.pj-peca{
  position:absolute; cursor:grab;
  touch-action:none; user-select:none; -webkit-user-select:none;
  border:0; padding:0; margin:0; background:transparent;
  -webkit-tap-highlight-color:transparent;
}
.pj-peca.pj-drag{ cursor:grabbing; filter:drop-shadow(0 8px 12px rgba(0,0,0,.35)); z-index:9000; }
.pj-peca.pj-posta{ pointer-events:none; filter:none; }
.pj-canto-peca{
  outline:4px solid #FFD166; outline-offset:2px; border-radius:6px;
  box-shadow:0 0 0 7px rgba(255,209,102,.4);
}
.pj-canto-alvo{
  position:absolute; border:4px dashed #E0A800; border-radius:8px; pointer-events:none;
  background:rgba(255,209,102,.22);
  animation:pj-pulso 1.1s ease-in-out infinite;
}
@keyframes pj-pulso{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
html[data-contraste="1"] .pj-scroll{ background:#fff; border-color:#000; }
html[data-contraste="1"] .pj-canto-peca{ outline:4px solid #000; box-shadow:0 0 0 7px #fff; }
html[data-contraste="1"] .pj-canto-alvo{ border-color:#000; background:#fff; }

/* ---------- 18. Merge — Junte os Iguais ---------- */
.merge{ text-align:center; max-width:640px; margin:0 auto; }
.merge-placar{ font-weight:700; color:var(--cor-primaria-escura); margin:6px 0 2px; }
.merge-sel-label{ min-height:1.4em; margin:2px 0; font-weight:700; }
.merge-grade{
  display:grid; grid-template-columns:repeat(6, 1fr); gap:6px;
  max-width:520px; margin:10px auto 0;
}
.merge-cell{
  position:relative; border:2px solid var(--cor-borda); border-radius:14px;
  background:#fff; min-height:64px; aspect-ratio:1/1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer; padding:4px;
  transition:transform .08s ease, box-shadow .12s, background .2s, border-color .15s;
}
.merge-cell:hover{ transform:translateY(-2px); }
.merge-cell.merge-sel{
  border-color:var(--cor-destaque);
  box-shadow:0 0 0 4px rgba(240,136,43,.35);
  transform:scale(1.04);
}
.merge-vazia{ background:rgba(255,255,255,.4); }
.merge-emoji{ font-size:1.7rem; line-height:1.15; }
.merge-nivel{
  font-size:.72rem; font-weight:800; color:var(--cor-texto-suave);
  background:#fff; border-radius:99px; padding:1px 7px; margin-top:2px;
}
/* cor de fundo acompanha o nível (fica mais "quente" ao evoluir) */
.merge-n1{ background:#FFF8E1; }
.merge-n2{ background:#FFF3C4; }
.merge-n3{ background:#FFE9A8; }
.merge-n4{ background:#FFDF85; }
.merge-n5{ background:#FFD76B; }
.merge-n6{ background:#FFC94D; }
.merge-n7{ background:#F9B93B; }
.merge-n8{ background:#FFAB00; }
html[data-contraste="1"] .merge-cell{ background:#fff; border-color:#000; }
html[data-contraste="1"] .merge-cell.merge-sel{ box-shadow:0 0 0 4px #000; }
html[data-contraste="1"] .merge-nivel{ background:#000; color:#fff; }
.merge-pop{ animation:merge-pop .4s ease; }
@keyframes merge-pop{ 0%{ transform:scale(.4); } 70%{ transform:scale(1.12); } 100%{ transform:scale(1); } }

/* ---------- 19. Jogo da Velha ---------- */
.velha{ text-align:center; max-width:520px; margin:0 auto; }
.velha-placar{ font-weight:800; font-size:1.1rem; margin:10px 0 4px; color:var(--cor-primaria-escura); }
.velha-grade{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
  max-width:360px; margin:10px auto;
}
.velha-cell{
  aspect-ratio:1/1; font-size:2.6rem; font-weight:800;
  border:2px solid var(--cor-borda); border-radius:16px; background:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; min-height:88px;
  box-shadow:var(--sombra-suave);
  transition:transform .08s, box-shadow .12s, background .2s;
}
.velha-cell:hover{ transform:translateY(-2px); box-shadow:var(--sombra); }
.velha-x{ color:var(--cor-primaria-escura); background:var(--cor-primaria-clara); border-color:var(--cor-primaria); }
.velha-o{ color:var(--cor-destaque-escura); background:var(--cor-destaque-clara); border-color:var(--cor-destaque); }
html[data-contraste="1"] .velha-cell{ background:#fff; border-color:#000; }
html[data-contraste="1"] .velha-x{ background:#fff; color:#000; }
html[data-contraste="1"] .velha-o{ background:#fff; color:#000; }

/* ---------- ♟️ Damas ---------- */
.damas-placar{ font-weight:800; font-size:1.05rem; margin:10px 0 2px; color:var(--cor-primaria-escura); }
.damas-legenda{ font-size:.85rem; color:var(--cor-texto-suave); margin:2px 0 6px; }
.damas-tabuleiro{
  display:grid; grid-template-columns:repeat(8,1fr);
  width:min(92vw,440px); margin:6px auto 10px;
  border:5px solid #5f3d1e; border-radius:10px; overflow:hidden;
  box-shadow:var(--sombra);
  user-select:none; -webkit-user-select:none; touch-action:manipulation;
}
.damas-cell{
  position:relative; aspect-ratio:1/1; border:0; padding:0;
  background:#e9d6b3; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.damas-casa-clara{ background:#f2e5cb; }
.damas-casa-jogo{ background:#b9884f; }
.damas-cell:disabled{ cursor:default; }
.damas-peca{
  position:absolute; inset:7%; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.22), inset 0 3px 4px rgba(255,255,255,.45), 0 2px 4px rgba(0,0,0,.3);
}
.damas-peca.w{ background:radial-gradient(circle at 35% 30%, #ffffff 0%, #efe2c8 55%, #d3ba8c 100%); border:2px solid #8a7a5f; }
.damas-peca.r{ background:radial-gradient(circle at 35% 30%, #ff9a86 0%, #d8432f 55%, #8f1d0f 100%); border:2px solid #5c1208; }
.damas-coroa{ font-size:clamp(12px,4.6vw,26px); line-height:1; pointer-events:none; text-shadow:0 1px 2px rgba(0,0,0,.25); }
.damas-cell.damas-sel .damas-peca{ box-shadow:0 0 0 3px var(--cor-destaque), 0 2px 4px rgba(0,0,0,.35); }
.damas-cell.damas-pode-cap .damas-peca{ box-shadow:0 0 0 3px #d6453a, inset 0 -5px 0 rgba(0,0,0,.22), 0 2px 4px rgba(0,0,0,.3); animation:damasPulso .9s infinite; }
.damas-vai{
  position:absolute; left:33%; top:33%; width:34%; height:34%; border-radius:50%;
  background:rgba(15,123,95,.85); box-shadow:0 0 0 2px rgba(255,255,255,.85) inset, 0 0 6px rgba(15,123,95,.6);
  animation:damasPulso 1.1s infinite;
}
.damas-captura{
  position:absolute; left:28%; top:28%; width:44%; height:44%; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:4px dashed #c93a2a; background:rgba(201,58,42,.14);
  animation:damasPulso .55s infinite;
}
.damas-captura::after{ content:"✖"; color:#c93a2a; font-weight:900; font-size:clamp(14px,4.8vw,28px); line-height:1; }
@keyframes damasPulso{ 0%,100%{ transform:scale(1); opacity:.95; } 50%{ transform:scale(1.16); opacity:.6; } }
html[data-contraste="1"] .damas-casa-clara{ background:#ffffff; }
html[data-contraste="1"] .damas-casa-jogo{ background:#cccccc; }
html[data-contraste="1"] .damas-tabuleiro{ border-color:#000; }
html[data-contraste="1"] .damas-peca.w{ border-color:#000; box-shadow:none; }
html[data-contraste="1"] .damas-peca.r{ border-color:#000; box-shadow:none; }

/* ---------- 🌀 Labirinto ---------- */
.labirinto-info{ font-weight:800; font-size:1rem; margin:10px 0 4px; color:var(--cor-primaria-escura); }
.labirinto-tabuleiro{
  display:grid; gap:0; width:min(92vw,430px); margin:6px auto 10px;
  border:6px solid #4a3c23; border-radius:10px; overflow:hidden;
  box-shadow:var(--sombra); user-select:none; -webkit-user-select:none;
  background:#3e2f1d;
}
.labirinto-cel{
  position:relative; aspect-ratio:1/1; background:#fdf3dd;
  box-sizing:border-box; border:0 solid transparent;
}
.labirinto-cel.lab-muro-cima{ border-top:5px solid #4a3c23; }
.labirinto-cel.lab-muro-baixo{ border-bottom:5px solid #4a3c23; }
.labirinto-cel.lab-muro-esquerda{ border-left:5px solid #4a3c23; }
.labirinto-cel.lab-muro-direita{ border-right:5px solid #4a3c23; }
.labirinto-bandeira{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-size:clamp(16px,5.4vw,30px); line-height:1;
}
.labirinto-jogador{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:52%; height:52%; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #2fae87 0%, #0f7b5f 60%, #0a5c47 100%);
  border:3px solid #fff; box-shadow:0 2px 5px rgba(0,0,0,.35);
  animation:labirintoPulso 1.4s infinite;
}
.labirinto-jogador.lab-chegou{ background:radial-gradient(circle at 35% 30%, #ffd76e 0%, #f5a623 60%, #c96a12 100%); border-color:#fff; }
.lab-caminho{ background:#d8f2e6; box-shadow:inset 0 0 0 3px rgba(15,123,95,.55); }
.labirinto-cel.lab-meta{ background:#eaf7d8; }
@keyframes labirintoPulso{ 0%,100%{ transform:translate(-50%,-50%) scale(1); } 50%{ transform:translate(-50%,-50%) scale(1.12); } }
.labirinto-setas{
  display:grid; grid-template-columns:repeat(3,auto); grid-template-rows:repeat(3,auto);
  gap:8px; justify-content:center; margin:4px auto;
}
.labirinto-seta{ min-height:58px; min-width:62px; font-size:1.5rem; }
.labirinto-setas-centro{ display:flex; align-items:center; justify-content:center; }
.lab-batida{ animation:labTremer .25s; }
@keyframes labTremer{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-6px); } 75%{ transform:translateX(6px); } }
html[data-contraste="1"] .labirinto-cel{ background:#ffffff; border-color:#000; }
html[data-contraste="1"] .labirinto-cel.lab-muro-cima{ border-top-color:#000; }
html[data-contraste="1"] .labirinto-cel.lab-muro-baixo{ border-bottom-color:#000; }
html[data-contraste="1"] .labirinto-cel.lab-muro-esquerda{ border-left-color:#000; }
html[data-contraste="1"] .labirinto-cel.lab-muro-direita{ border-right-color:#000; }

/* ---------- 🀄 Mahjong ---------- */
.mahjong-info{ font-weight:800; font-size:1rem; margin:10px 0 4px; color:var(--cor-primaria-escura); }
.mahjong-legenda{
  font-size:.95rem; font-weight:700; color:var(--cor-texto); margin:0 0 8px;
  background:var(--cor-primaria-clara); border-radius:12px; padding:8px 12px;
}
.mahjong-tabuleiro{
  position:relative; width:min(94vw,560px); margin:6px auto 10px;
  background:radial-gradient(circle at 30% 20%, #2c7a58 0%, #1e5c40 60%, #14432e 100%);
  border:6px solid #8a5a2b; border-radius:14px; box-shadow:var(--sombra);
  user-select:none; -webkit-user-select:none; overflow:hidden;
}
.m-peca{
  position:absolute; box-sizing:border-box; border-radius:8px;
  background:linear-gradient(165deg, #fffdf4 0%, #f3e2b8 100%);
  border:2px solid #c4a574;
  box-shadow:inset -3px -4px 0 #d8c49a, 3px 4px 0 #5a3d18;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:transform .08s, box-shadow .12s, filter .12s, opacity .12s;
}
.m-livre{
  opacity:1; filter:none;
  border-color:#1E9E62;
  box-shadow:0 0 0 3px #1E9E62, inset -3px -4px 0 #d8c49a, 3px 5px 0 #3d6b3a;
}
.m-livre:hover{ transform:translateY(-3px); }
.m-sel{ box-shadow:0 0 0 4px var(--cor-destaque), 3px 5px 0 #5a3d18; transform:translateY(-3px); }
.m-presa{
  opacity:.4; filter:grayscale(.5) brightness(.72);
  cursor:default; border-color:#8a7a5f;
  box-shadow:1px 1px 0 rgba(0,0,0,.18);
}
.m-presa:hover{ transform:none; }
.dica-on{ box-shadow:0 0 0 4px #d6453a, 0 3px 6px rgba(0,0,0,.35); animation:mahPulso .6s infinite; }
@keyframes mahPulso{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }
.m-circulos{
  position:absolute; left:12%; top:12%; right:12%; bottom:12%;
  display:grid; grid-template-columns:repeat(3,1fr); gap:8%;
}
.m-ponto{ border-radius:50%; background:transparent; }
.m-ponto.aceso{ background:radial-gradient(circle at 35% 30%, #f2745a 0%, #c62828 60%, #8e1c1c 100%); }
.m-dragao{
  position:absolute; left:24%; top:24%; width:52%; height:52%;
  transform:rotate(45deg); border-radius:14%;
}
.m-dragao-verde{ background:radial-gradient(circle at 35% 30%, #6db46f 0%, #2e7d32 60%, #1b5e20 100%); border:2px solid #123d15; }
.m-dragao-vermelho{ background:radial-gradient(circle at 35% 30%, #ff7a66 0%, #c62828 60%, #8e1c1c 100%); border:2px solid #5c1010; }
.m-dragao-branco{ background:#ffffff; border:3px solid #6b6b6b; box-shadow:inset 0 0 0 4px #e3e3e3; }
.m-vento{
  position:absolute; left:0; top:0; right:0; bottom:0;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; line-height:1; color:#1d3557; font-size:1.7em;
}
.m-vento i, .m-vento{ font-style:normal; }
html[data-contraste="1"] .m-peca{ background:#ffffff; border-color:#000; box-shadow:none; }
html[data-contraste="1"] .m-livre{ border:4px solid #000; box-shadow:none; }
html[data-contraste="1"] .m-presa{ opacity:.35; filter:none; border-style:dashed; }
html[data-contraste="1"] .mahjong-tabuleiro{ border-color:#000; background:#555; }
html[data-contraste="1"] .mahjong-legenda{ background:#fff; border:2px solid #000; }

/* ---------- 🏖️ Caixa de Areia ---------- */
.areia-paleta{ justify-content:center; gap:6px; flex-wrap:wrap; }
.areia-moldura{
  width:min(94vw,560px); margin:8px auto 6px;
  border:6px solid #6b4423; border-radius:12px; overflow:hidden;
  box-shadow:var(--sombra); background:#f9eed6;
}
#areiaCanvas{
  display:block; width:100%; height:auto;
  image-rendering:pixelated; image-rendering:crisp-edges;
  touch-action:none; cursor:crosshair;
}
html[data-contraste="1"] .areia-moldura{ border-color:#000; }

/* ---------- 🂠 Dominó ---------- */
.domino{ text-align:center; max-width:640px; margin:0 auto; }
.domino-legenda{ font-size:.85rem; color:var(--cor-texto-suave); margin:0 0 6px; }
.domino-placar{ font-weight:800; font-size:1.05rem; margin:6px 0 4px; color:var(--cor-primaria-escura); }
.domino-chips{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:4px 0 8px; }
.chip-domino{
  background:var(--cor-fundo); border:2px dashed var(--cor-borda); border-radius:999px;
  padding:5px 14px; font-size:.9rem; font-weight:700;
}
html[data-contraste="1"] .chip-domino{ background:#fff; border-color:#000; }
.domino-mesa{
  display:flex; flex-wrap:wrap; gap:6px; justify-content:center; align-items:center;
  min-height:96px; padding:14px 10px; margin:4px auto 8px;
  background:radial-gradient(circle at 30% 20%, #2c7a58 0%, #1e5c40 60%, #14432e 100%);
  border:5px solid #8a5a2b; border-radius:14px; box-shadow:var(--sombra);
}
html[data-contraste="1"] .domino-mesa{ background:#555; border-color:#000; }
.domino-mesa-vazia{ color:#eafff4; font-weight:700; padding:6px; margin:0; }
html[data-contraste="1"] .domino-mesa-vazia{ color:#fff; }
.domino-status{ min-height:2.6em; color:var(--cor-texto-suave); margin:8px 0; line-height:1.5; }
.domino-status b{ color:var(--cor-primaria-escura); }
.domino-status.domino-aviso{ color:var(--cor-texto); background:#fff7e0; border:2px solid #f0b429; border-radius:12px; padding:10px 12px; }
/* peça na mão (vertical) */
.domino-pedra{
  width:clamp(44px,12vw,60px); aspect-ratio:1/1.95;
  display:flex; flex-direction:column; border-radius:8px; padding:0; overflow:hidden;
  background:linear-gradient(160deg,#fffef8 0%,#f6edd8 60%,#e7d9b8 100%);
  border:2px solid #a08a5f; box-shadow:inset 0 -3px 0 rgba(120,90,40,.18), 0 2px 4px rgba(0,0,0,.28);
  cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .08s, box-shadow .12s;
}
.domino-pedra:hover{ transform:translateY(-3px); }
.domino-pedra.domino-pode{
  border-color:var(--cor-destaque);
  box-shadow:0 0 0 4px rgba(240,136,43,.45), 0 3px 6px rgba(0,0,0,.3);
  animation:dominoPulso 1.1s infinite;
}
.domino-pedra.domino-sel{ transform:translateY(-5px); border-color:var(--cor-primaria); box-shadow:0 0 0 4px var(--cor-primaria), 0 4px 8px rgba(0,0,0,.3); }
.domino-pedra.domino-bloqueada{ opacity:.55; cursor:default; }
/* peça na mesa (horizontal) */
.domino-pedra-h{
  width:clamp(56px,15vw,78px); aspect-ratio:1.95/1;
  display:flex; align-items:stretch; border-radius:8px; overflow:hidden;
  background:linear-gradient(160deg,#fffef8 0%,#f6edd8 60%,#e7d9b8 100%);
  border:2px solid #a08a5f; box-shadow:inset 0 -3px 0 rgba(120,90,40,.18), 0 2px 4px rgba(0,0,0,.3);
}
.domino-pedra-h.domino-fim-esq{ box-shadow:0 0 0 4px #FFD166, inset 0 -3px 0 rgba(120,90,40,.18); }
.domino-pedra-h.domino-fim-dir{ box-shadow:0 0 0 4px #FFD166, inset 0 -3px 0 rgba(120,90,40,.18); }
/* metades e pontinhos */
.domino-metade{ flex:1; display:flex; align-items:center; justify-content:center; min-width:0; }
.domino-divisor{ width:100%; height:2px; background:#a08a5f; flex:none; }
.domino-divisor-v{ width:2px; align-self:stretch; background:#a08a5f; flex:none; }
.domino-pontos{
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  gap:7%; width:70%; aspect-ratio:1/1;
}
.domino-ponto{ border-radius:50%; }
.domino-ponto.aceso{ background:radial-gradient(circle at 35% 30%, #3a3f47 0%, #16191d 60%, #000 100%); }
.domino-mao{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:6px 0 2px; min-height:86px; }
.domino-sem-pecas{ align-self:center; font-weight:800; color:var(--cor-sucesso); }
.domino-acoes{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:12px; }
@keyframes dominoPulso{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } }
html[data-contraste="1"] .domino-pedra,
html[data-contraste="1"] .domino-pedra-h{ background:#fff; border-color:#000; box-shadow:none; }
html[data-contraste="1"] .domino-ponto.aceso{ background:#000; }
html[data-contraste="1"] .domino-pedra.domino-pode,
html[data-contraste="1"] .domino-pedra-h.domino-fim-esq,
html[data-contraste="1"] .domino-pedra-h.domino-fim-dir{ box-shadow:0 0 0 4px #000; }

/* ---------- 🧱 Blocos de Encaixe ---------- */
.bloco{ text-align:center; max-width:620px; margin:0 auto; }
.bloco-placar{ font-weight:800; font-size:1.05rem; margin:6px 0 8px; color:var(--cor-primaria-escura); }
.bloco-grade{
  display:grid; grid-template-columns:repeat(8,1fr); gap:4px;
  width:min(92vw,480px); margin:6px auto 10px;
  background:var(--cor-primaria-escura); border:6px solid #4a3c23;
  border-radius:12px; padding:6px; box-shadow:var(--sombra);
  user-select:none; -webkit-user-select:none; touch-action:manipulation;
}
.bloco-cell{
  aspect-ratio:1/1; border:0; border-radius:6px; padding:0;
  background:#fdf3dd; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background .12s;
}
.bloco-cell.cheia{ background:var(--cor-primaria); box-shadow:inset 0 -3px 0 rgba(0,0,0,.18); }
.bloco-cell.pode{
  background:#a8e6c8;
  box-shadow:0 0 0 2px var(--cor-destaque) inset;
  animation:blocoPulso 1.1s infinite;
}
/* contorno COMPLETO da peça (mostra onde ela vai entrar) */
.bloco-cell.previa{
  background:#d8f2e6;
  box-shadow:inset 0 0 0 2px rgba(15,123,95,.4);
}
/* peça flutuante que segue o dedo/mouse durante o arraste */
.bloco-fantasma{
  position:fixed; z-index:200; pointer-events:none;
  transform:translate(-50%,-50%);
  background:rgba(15,123,95,.16);
  border:2px dashed var(--cor-primaria);
  border-radius:12px; padding:6px;
}
.bloco-status{ min-height:2.6em; color:var(--cor-texto-suave); margin:6px 0; line-height:1.5; }
.bloco-status b{ color:var(--cor-primaria-escura); }
.bloco-bandeja{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:8px 0 4px; min-height:96px; }
.bloco-peca{
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border:2px solid var(--cor-borda); border-radius:14px;
  padding:10px; cursor:pointer; min-height:88px;
  transition:transform .1s, border-color .12s, box-shadow .12s;
  -webkit-tap-highlight-color:transparent;
}
.bloco-peca:hover{ transform:translateY(-2px); }
.bloco-peca.sel{ border-color:var(--cor-destaque); box-shadow:0 0 0 4px rgba(240,136,43,.35); transform:scale(1.04); }
.bloco-mini{ display:grid; gap:3px; }
.bloco-mini-cel{ width:clamp(16px,5vw,22px); height:clamp(16px,5vw,22px); border-radius:4px; background:#f1ece2; }
.bloco-mini-cel.cheia{ background:var(--cor-primaria); }
.bloco-acoes{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:12px; }
@keyframes blocoPulso{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }
html[data-contraste="1"] .bloco-cell{ background:#fff; border:1px solid #000; }
html[data-contraste="1"] .bloco-cell.cheia{ background:#000; }
html[data-contraste="1"] .bloco-cell.pode{ background:#fff; box-shadow:0 0 0 3px #000 inset; }
html[data-contraste="1"] .bloco-cell.previa{ background:#fff; box-shadow:inset 0 0 0 2px #000; }
html[data-contraste="1"] .bloco-fantasma{ background:#fff; border-color:#000; }
html[data-contraste="1"] .bloco-grade{ background:#555; border-color:#000; }
html[data-contraste="1"] .bloco-peca{ background:#fff; border-color:#000; }
html[data-contraste="1"] .bloco-peca.sel{ box-shadow:0 0 0 4px #000; }
html[data-contraste="1"] .bloco-mini-cel{ background:#eee; }
html[data-contraste="1"] .bloco-mini-cel.cheia{ background:#000; }

/* ---------- 👀 Sete erros ---------- */
.erros{ text-align:center; max-width:980px; margin:0 auto; }
.erros-placar{
  font-weight:800; font-size:1.15rem; margin:8px 0;
  color:var(--cor-primaria-escura);
}
.erros-grade{
  display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start;
}
@media (max-width:700px){
  .erros-grade{ grid-template-columns:1fr; }
}
.erros-quadro{
  background:#fff;
  border:3px solid var(--cor-borda); border-radius:16px;
  overflow:hidden; box-shadow:var(--sombra-suave);
  display:flex; flex-direction:column;
}
.erros-cena{
  position:relative; background:#fff;
  touch-action:manipulation; cursor:pointer;
}
.erros-foto{
  width:100%; height:auto; display:block;
  aspect-ratio:1376 / 768;
  user-select:none; -webkit-user-select:none; pointer-events:none;
}
.erros-quadro svg,
.erros-svg{
  position:absolute; left:0; top:0; width:100%; height:100%;
  max-width:none; display:block; pointer-events:none;
}
.erros-rotulo{
  position:static; display:block; margin:0;
  padding:8px 12px; font-weight:800; font-size:.95rem;
  background:var(--cor-primaria-clara); color:var(--cor-primaria-escura);
  border-radius:0; border-top:1px solid var(--cor-borda);
  box-shadow:none; text-align:center;
}
.erros-marca{
  fill:none; stroke:#D64545; stroke-width:1.1;
  pointer-events:none;
}
.erros-dica{
  stroke:#F0882B; stroke-dasharray:2 1.4;
  animation:errosPulso 0.7s ease-in-out infinite;
}
@keyframes errosPulso{
  0%,100%{ opacity:.45; stroke-width:1.1; }
  50%{ opacity:1; stroke-width:1.8; }
}
html[data-contraste="1"] .erros-quadro{ border-color:#000; }
html[data-contraste="1"] .erros-rotulo{ background:#fff; border:2px solid #000; }
html[data-contraste="1"] .erros-marca{ stroke:#000; }
html[data-contraste="1"] .erros-dica{ stroke:#000; }

/* ---------- 🔎 Achar coisas ---------- */
.achar{ text-align:center; max-width:980px; margin:0 auto; }
.achar-placar{
  font-weight:800; font-size:1.15rem; margin:8px 0;
  color:var(--cor-primaria-escura);
}
.achar-quadro{
  position:relative; background:#2a1c10;
  border:3px solid var(--cor-borda); border-radius:16px 16px 0 0;
  overflow:hidden; box-shadow:var(--sombra-suave);
  touch-action:manipulation; cursor:pointer;
}
.achar-foto{
  width:100%; height:auto; display:block;
  aspect-ratio:1376 / 768;
  user-select:none; -webkit-user-select:none; pointer-events:none;
}
.achar-quadro svg,
.achar-svg{
  position:absolute; left:0; top:0; width:100%; height:100%;
  max-width:none; display:block; pointer-events:none;
}
.achar-barra,
.achar-lista{
  display:flex; flex-wrap:wrap; gap:6px 4px; justify-content:center; align-items:center;
  margin:0; padding:12px 14px;
  background:#3a2816; color:#f4e6c4;
  border:3px solid var(--cor-borda); border-top:0;
  border-radius:0 0 16px 16px;
  font-weight:800; font-size:1.05rem; line-height:1.45;
}
.achar-item{
  padding:4px 8px; border-radius:8px; background:transparent;
  border:none; color:#f4e6c4; font-weight:800; font-size:1.02rem;
}
.achar-item + .achar-item::before{
  content:"• "; color:#c9b48a; font-weight:800;
}
.achar-item.achado{
  background:transparent; border:none;
  text-decoration:line-through; color:#8fdf9a; opacity:.78;
}
.achar-marca{
  fill:none; stroke:#D64545; stroke-width:1.1;
  pointer-events:none;
}
.achar-dica{
  stroke:#F0882B; stroke-dasharray:2 1.4;
  animation:acharPulso 0.7s ease-in-out infinite;
}
@keyframes acharPulso{
  0%,100%{ opacity:.45; stroke-width:1.1; }
  50%{ opacity:1; stroke-width:1.8; }
}
html[data-contraste="1"] .achar-quadro{ border-color:#000; }
html[data-contraste="1"] .achar-barra,
html[data-contraste="1"] .achar-lista{ background:#000; color:#fff; border-color:#000; }
html[data-contraste="1"] .achar-item{ background:transparent; border:none; color:#fff; }
html[data-contraste="1"] .achar-item.achado{ background:transparent; border:none; color:#fff; }
html[data-contraste="1"] .achar-marca{ stroke:#fff; }
html[data-contraste="1"] .achar-dica{ stroke:#fff; }

/* ---------- 🛍️ Loja parceira: Mercado Livre (link de afiliado) ---------- */
.ml-parceiro{
  margin-top:6px; border:2px solid #FFE600;
  background:linear-gradient(135deg,#FFFDF2,#FFF4C2);
  position:relative;
}
.ml-corpo{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.ml-logo{
  width:76px; height:76px; flex:0 0 auto; border-radius:14px;
  background:#FFE600; box-shadow:0 2px 6px rgba(0,0,0,.12);
  object-fit:contain; padding:4px;
}
.ml-texto{
  flex:1 1 220px; min-width:200px; display:flex; flex-direction:column; gap:2px;
}
.ml-texto strong{ font-size:1.08rem; color:var(--cor-texto); }
.ml-sub{ color:var(--cor-texto-suave); font-size:.95rem; }
.ml-botao{
  background:#FFE600; color:#0E1F4B; font-weight:800; border-radius:999px;
  border:2px solid #0E1F4B; flex:0 0 auto; padding:12px 20px;
  font-size:1rem; box-shadow:0 2px 0 rgba(0,0,0,.18);
}
.ml-botao:hover{ background:#FFF176; transform:translateY(-1px); }
html[data-contraste="1"] .ml-parceiro{ background:#000; border-color:#FFF; }
html[data-contraste="1"] .ml-texto strong{ color:#FFF; }
html[data-contraste="1"] .ml-logo{ background:#FFF; }
html[data-contraste="1"] .ml-botao{ background:#FFE600; color:#000; border-color:#FFE600; }

/* ---------- 🛒 Tela Compras (achadinhos úteis — tabela em js/produtos.js) ---------- */
.compras-layout{
  display:flex; gap:18px; align-items:flex-start; margin-top:4px;
}
.compras-menu{
  flex:0 0 230px; display:flex; flex-direction:column; gap:8px;
  background:var(--cor-cartao); border:1px solid var(--cor-borda);
  border-radius:var(--raio); padding:12px;
}
.compras-menu-item{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%; text-align:left; border:2px solid transparent; background:transparent;
  border-radius:12px; padding:12px 14px; font-weight:700; font-size:.98rem;
  color:var(--cor-texto); cursor:pointer; min-height:48px; line-height:1.3;
}
.compras-menu-item:hover{ background:var(--cor-primaria-clara); }
.compras-menu-item.ativo{ background:var(--cor-primaria); color:#fff; border-color:var(--cor-primaria-escura); }
.compras-contagem{
  flex:none; background:var(--cor-fundo); color:var(--cor-texto-suave);
  border-radius:999px; padding:1px 9px; font-size:.8rem; font-weight:800;
}
.compras-menu-item.ativo .compras-contagem{ background:rgba(255,255,255,.25); color:#fff; }
.compras-conteudo{ flex:1 1 auto; min-width:0; }
.compras-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px;
}
.compras-card{
  display:flex; flex-direction:column; gap:8px;
  background:var(--cor-cartao); border:1px solid var(--cor-borda);
  border-radius:var(--raio); box-shadow:var(--sombra-suave); padding:14px;
}
.compras-img-wrap{
  height:120px; display:flex; align-items:center; justify-content:center;
  background:var(--cor-fundo); border-radius:12px; overflow:hidden;
}
.compras-img{ width:100%; height:100%; object-fit:contain; padding:6px; }
.compras-img-fallback{ font-size:3rem; line-height:1; }
.compras-card h3{ margin:0; font-size:1.02rem; line-height:1.3; }
.compras-card p{ margin:0; color:var(--cor-texto-suave); font-size:.88rem; line-height:1.4; }
.compras-cta{
  margin-top:auto; display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; border-radius:12px; padding:10px 14px; font-weight:800; font-size:.98rem;
  background:var(--cor-primaria); color:#fff; text-decoration:none;
  box-shadow:0 4px 0 var(--cor-primaria-escura); transition:filter .15s;
}
.compras-cta:hover{ filter:brightness(1.08); }
.compras-cta-icone{
  width:32px; height:32px; object-fit:contain; border-radius:6px;
  background:#fff; flex:none; padding:2px;
}
.compras-cta.loja-mercadolivre{ background:#FFE600; color:#0E1F4B; box-shadow:0 4px 0 #C9B400; border:2px solid #0E1F4B; }
.compras-cta.loja-shopee{ background:#EE4D2D; color:#fff; box-shadow:0 4px 0 #B83820; }
.compras-cta.loja-amazon{ background:#131921; color:#FFD814; box-shadow:0 4px 0 #000; }
.compras-cta.loja-magalu{ background:#0086FF; color:#fff; box-shadow:0 4px 0 #005DB3; }
.compras-cta.loja-americanas{ background:#E60014; color:#fff; box-shadow:0 4px 0 #A00010; }
.compras-cta-inativo{
  background:#E9E4DA; color:var(--cor-texto-suave); box-shadow:none; cursor:default; border:none;
}
.compras-aviso{ text-align:center; margin-top:14px; }
html[data-contraste="1"] .compras-menu{ background:#fff; border-color:#000; }
html[data-contraste="1"] .compras-menu-item.ativo{ background:#000; color:#fff; }
html[data-contraste="1"] .compras-card{ background:#fff; border-color:#000; }
html[data-contraste="1"] .compras-card h3{ color:#000; }
html[data-contraste="1"] .compras-cta{ background:#000; color:#fff; box-shadow:none; border:2px solid #000; }

/* ---------- Pausa com carinho (tempo de tela + achadinho) ---------- */
.pausa-box{ max-width:520px; }
.pausa-texto{
  font-size:1.22rem; line-height:1.55; margin:4px 0 14px; font-weight:600;
}
.pausa-achadinho{
  background:var(--cor-fundo); border:1px dashed var(--cor-borda);
  border-radius:16px; padding:12px 14px 14px; text-align:left;
}
.pausa-achadinho .pausa-achadinho-rotulo{
  font-size:.82rem; font-weight:800; letter-spacing:.3px; text-transform:uppercase;
  color:var(--cor-texto-suave); margin:0 0 8px;
}
.pausa-achadinho .compras-card{ margin:0; box-shadow:none; }
.pausa-achadinho .compras-img-wrap{ height:88px; }
html[data-contraste="1"] .pausa-achadinho{ background:#fff; border:2px solid #000; }
@media (max-width:760px){
  .compras-layout{ flex-direction:column; }
  .compras-menu{ flex:1 1 auto; flex-direction:row; flex-wrap:wrap; width:100%; }
  .compras-menu-item{ width:auto; flex:1 1 auto; justify-content:center; }
}

/* ---------- 🃏 Paciência ---------- */
.paciencia{
  --pac-w: clamp(26px, 11.2vw, 72px);
  --pac-h: calc(var(--pac-w) * 1.42);
  --pac-gap: clamp(2px, 0.8vw, 6px);
  --pac-fan: 16px;
  text-align:center; max-width:820px; margin:0 auto; width:100%;
  user-select:none; touch-action:manipulation;
  overflow-x:hidden;
}
.pac-mesa{
  background:radial-gradient(circle at 30% 20%, #2c7a58 0%, #1e5c40 60%, #14432e 100%);
  border:6px solid #8a5a2b; border-radius:14px; box-shadow:var(--sombra);
  padding:10px 4px 14px; overflow-x:hidden; width:100%; box-sizing:border-box;
}
.pac-topo{
  display:flex; align-items:flex-start; gap:var(--pac-gap);
  flex-wrap:nowrap; justify-content:space-between;
  margin:0 0 12px; min-height:var(--pac-h); width:100%;
}
.pac-monte{
  flex:1 1 0; min-width:0; max-width:var(--pac-w); width:auto; height:var(--pac-h);
  border-radius:8px; border:2px solid #8a5a2b; background:#0F7B5F; color:#fff;
  font-weight:800; font-size:clamp(.7rem, 2.4vw, 1.05rem); box-shadow:2px 3px 0 #5a3d18;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.pac-waste{
  position:relative; flex:1.15 1 0; min-width:0;
  width:auto; max-width:calc(var(--pac-w) + var(--pac-fan)); height:var(--pac-h);
}
.pac-waste-item{
  position:absolute; top:0; left:0;
  width:var(--pac-w); max-width:100%; height:var(--pac-h);
}
.pac-naipes{ display:flex; gap:var(--pac-gap); margin-left:auto; flex:4 1 0; min-width:0; }
.pac-naipe{ flex:1 1 0; min-width:0; width:auto; max-width:var(--pac-w); height:var(--pac-h); }
.pac-tapete{
  display:flex; gap:var(--pac-gap); justify-content:stretch; align-items:flex-start;
  min-height:240px; width:100%;
}
.pac-col{ position:relative; flex:1 1 0; min-width:0; max-width:none; }
.pac-item{ position:absolute; left:0; right:0; }
.pac-carta{
  box-sizing:border-box;
  width:100%; height:var(--pac-h); min-height:var(--pac-h); min-width:0;
  border-radius:8px; border:2px solid #c4a574;
  background:linear-gradient(165deg,#fffdf8,#f3e6c4);
  box-shadow:1px 2px 0 #5a3d18;
  display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
  padding:3px 3px 4px; font-weight:800; cursor:pointer;
  -webkit-tap-highlight-color:transparent; line-height:1;
  overflow:hidden;
}
.pac-carta.pac-down{
  background:repeating-linear-gradient(45deg,#0F7B5F 0 8px,#0A5C47 8px 16px);
  color:#fff; border-color:#8a5a2b; font-size:1.4rem;
  align-items:center; justify-content:center; padding:0;
}
.pac-cantinho{
  display:flex; align-items:center; justify-content:center; gap:1px;
  min-height:1.35em; flex:none;
}
.pac-n{ font-size:clamp(1.05rem, 3.6vw, 1.4rem); font-weight:800; }
.pac-s{ font-size:clamp(1.05rem, 3.6vw, 1.4rem); }
.pac-miolo{
  flex:1; display:flex; align-items:center; justify-content:center;
  font-size:clamp(1.5rem, 5vw, 2.1rem); line-height:1; opacity:.92;
}
.pac-red .pac-n, .pac-red .pac-s, .pac-red .pac-miolo{ color:#C62828; }
.pac-preta .pac-n, .pac-preta .pac-s, .pac-preta .pac-miolo{ color:#1a1a1a; }
.pac-sel{ box-shadow:0 0 0 3px var(--cor-destaque), 2px 3px 0 #5a3d18; transform:translateY(-3px); }
.pac-vazio-col, .pac-vazio-naipe, .pac-vazio-slot{
  background:rgba(255,255,255,.12); border:2px dashed rgba(255,255,255,.55);
  color:#eafff4; font-size:.78rem; font-weight:800; box-shadow:none; cursor:pointer;
  width:100%; height:var(--pac-h); min-height:var(--pac-h);
  display:flex; align-items:center; justify-content:center; border-radius:8px;
}
.pac-vazio-naipe{ font-size:1.5rem; color:rgba(255,255,255,.8); }
.pac-waste > .pac-vazio-slot{ width:var(--pac-w); max-width:100%; }
@media (max-width:520px){
  .area-jogo:has(.paciencia){ padding:10px 6px 12px; }
  .paciencia h3{ font-size:1.08rem !important; }
  .paciencia > .menor{ font-size:.8rem; line-height:1.35; }
  .pac-mesa{ padding:8px 3px 12px; border-width:4px; }
  .pac-tapete{ min-height:220px; }
}
html[data-contraste="1"] .pac-mesa{ background:#555; border-color:#000; }
html[data-contraste="1"] .pac-carta{ background:#fff; border-color:#000; box-shadow:none; }
html[data-contraste="1"] .pac-carta.pac-down{ background:#000; color:#fff; }
html[data-contraste="1"] .pac-sel{ box-shadow:0 0 0 4px #000; }
html[data-contraste="1"] .pac-red .pac-n,
html[data-contraste="1"] .pac-red .pac-s,
html[data-contraste="1"] .pac-red .pac-miolo{ color:#B00000; }
html[data-contraste="1"] #pacStatus .pac-nome-red{ color:#B00000; }
html[data-contraste="1"] #pacStatus .pac-nome-preta{ color:#000; }

/* 📅 botãozinho "Na agenda" (carimbo do) */
.btn-ics{ min-height:44px; padding: 8px 12px; font-size: 0.98rem; }
@media (max-width: 480px){ .btn-ics{ width: 100%; } }