/* ===================== TOPO ===================== */
.topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(20px, 5vw, 60px); background: var(--azul); color: var(--branco);
  position: sticky; top: 0; z-index: 40; box-shadow: 0 6px 20px rgba(0,0,0,.15);
}
.topo__brand { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 700; color: var(--branco); text-decoration: none; }
.topo__voltar { color: var(--dourado-claro); text-decoration: none; font-weight: 600; font-size: .95rem; }
.topo__voltar:hover { color: var(--branco); }

/* ===================== HERO DA PÁGINA ===================== */
.jogos-hero { text-align: center; padding: 54px 20px 30px; background: var(--creme); }
.jogos-hero__titulo { font-size: clamp(2.4rem, 6vw, 3.6rem); color: var(--azul); margin: 12px 0 8px; }
.jogos-hero__sub { color: var(--texto-suave); font-size: 1.1rem; }

/* ===================== ABAS ===================== */
.abas {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  padding: 6px 20px 0; background: var(--creme); position: sticky; top: 60px; z-index: 30;
}
.aba {
  font-family: inherit; font-size: 1rem; font-weight: 600; cursor: pointer;
  padding: 12px 22px; border-radius: 100px 100px 0 0; border: none;
  background: transparent; color: var(--texto-suave); transition: all .2s;
}
.aba:hover { color: var(--azul); }
.aba.is-ativa { background: var(--branco); color: var(--azul); box-shadow: 0 -4px 14px rgba(27,42,74,.08); }

/* ===================== ÁREA DOS JOGOS ===================== */
.jogos-main { background: var(--branco); min-height: 60vh; padding: 40px 20px 80px; }
.jogo { display: none; max-width: 640px; margin: 0 auto; }
.jogo.is-ativo { display: block; animation: fade .3s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: none;} }
.jogo__cabeca { text-align: center; margin-bottom: 20px; }
.jogo__cabeca h2 { font-size: 2rem; color: var(--azul); }
.jogo__cabeca p { color: var(--texto-suave); margin-top: 6px; }
.jogo__placar {
  display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap;
  margin-bottom: 24px; color: var(--texto); font-size: .98rem;
}
.jogo__placar strong { color: var(--dourado); }
.btn--sm { padding: 9px 18px; font-size: .9rem; }
.jogo__vitoria {
  text-align: center; margin-top: 26px; font-size: 1.25rem; font-weight: 600; color: #1c7c46;
  background: #e8f7ee; border: 1px solid #b8e6ca; border-radius: 14px; padding: 18px;
}

/* ===================== MEMÓRIA ===================== */
.memoria-grade {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 460px; margin: 0 auto;
}
.mem-carta {
  aspect-ratio: 1; perspective: 700px; cursor: pointer; border: none; background: transparent; padding: 0;
}
.mem-carta__inner { position: relative; width: 100%; height: 100%; transition: transform .4s; transform-style: preserve-3d; }
.mem-carta.is-virada .mem-carta__inner, .mem-carta.is-par .mem-carta__inner { transform: rotateY(180deg); }
.mem-face {
  position: absolute; inset: 0; backface-visibility: hidden; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: clamp(1.6rem, 7vw, 2.4rem);
}
.mem-frente { background: linear-gradient(150deg, var(--azul) 0%, var(--azul-claro) 100%); color: #fff; }
.mem-verso { background: linear-gradient(150deg, #f6e9c8, var(--dourado)); transform: rotateY(180deg); }
.mem-carta.is-par .mem-verso { box-shadow: 0 0 0 3px #46b877 inset; }

/* ===================== QUEBRA-CABEÇA ===================== */
.puzzle-area { display: flex; gap: 24px; align-items: flex-start; justify-content: center; flex-wrap: wrap; }
.puzzle-grade {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  width: min(360px, 82vw); aspect-ratio: 1; gap: 4px; background: var(--creme-escuro);
  padding: 4px; border-radius: 14px;
}
.pz-peca {
  border: none; border-radius: 8px; cursor: pointer; background-image: url('../img/puzzle.png');
  background-size: 300% 300%; transition: transform .12s;
}
.pz-peca:hover { transform: scale(.97); }
.pz-peca--vazia { background: transparent; cursor: default; }
.puzzle-modelo { text-align: center; }
.puzzle-modelo p { font-size: .85rem; color: var(--texto-suave); margin-bottom: 6px; }
.puzzle-modelo img { width: 130px; border-radius: 10px; box-shadow: var(--sombra); }

/* ===================== LIGAR VERSÍCULO ===================== */
.ligar-area { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; align-items: start; }
.ligar-coluna { display: flex; flex-direction: column; gap: 12px; }
.lig-item {
  font-family: inherit; text-align: left; cursor: pointer; border: 2px solid var(--creme-escuro);
  background: var(--branco); border-radius: 14px; padding: 14px 16px; transition: all .18s;
  color: var(--texto); box-shadow: 0 4px 12px rgba(27,42,74,.06);
}
.lig-item:hover { border-color: var(--dourado); }
.lig-figura { font-size: 2.4rem; text-align: center; }
.lig-versiculo { font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; line-height: 1.3; }
.lig-versiculo small { display: block; color: var(--dourado); font-weight: 600; margin-top: 4px; font-family: 'Inter', sans-serif; font-size: .8rem; }
.lig-item.is-selecionado { border-color: var(--azul); background: #eef2fa; }
.lig-item.is-certo { border-color: #46b877; background: #e8f7ee; cursor: default; opacity: .75; }
.lig-item.is-errado { animation: shake .4s; border-color: #e05a5a; }
@keyframes shake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-6px);} 75%{transform:translateX(6px);} }

/* ===================== ENCONTRE AS DIFERENÇAS ===================== */
.dif-area { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.dif-bloco { text-align: center; }
.dif-rotulo { display: block; font-size: .85rem; color: var(--texto-suave); margin-bottom: 8px; font-weight: 600; }
.dif-grade {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
  width: min(300px, 78vw); background: var(--creme-escuro); padding: 6px; border-radius: 12px;
}
.dif-cel {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: clamp(1.1rem, 5vw, 1.5rem); background: var(--branco); border-radius: 7px; border: none;
}
.dif-grade--b .dif-cel { cursor: pointer; transition: transform .1s; }
.dif-grade--b .dif-cel:hover { transform: scale(1.08); }
.dif-cel.is-achado { background: #e8f7ee; box-shadow: 0 0 0 2px #46b877 inset; }

/* ===================== LABIRINTO ===================== */
.labirinto {
  display: grid; gap: 0; width: min(400px, 88vw); aspect-ratio: 1; margin: 0 auto;
  border: 4px solid var(--azul); border-radius: 10px; overflow: hidden; background: #cfe8c9;
}
.lab-cel { display: flex; align-items: center; justify-content: center; font-size: .9rem; }
.lab-cel--parede { background: #3d6b45; }
.lab-cel--caminho { background: #eaf7e4; }
.lab-cel--fim { background: #fff4d6; }
.lab-controles { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 20px; }
.lab-controles__linha { display: flex; gap: 8px; }
.lab-btn {
  width: 54px; height: 54px; border-radius: 12px; border: none; cursor: pointer;
  background: var(--azul); color: #fff; font-size: 1.3rem; transition: background .15s, transform .1s;
}
.lab-btn:hover { background: var(--azul-claro); }
.lab-btn:active { transform: scale(.92); }

/* ===================== LIGUE À SOMBRA (usa .ligar-area) ===================== */
.silhueta { filter: brightness(0); }
#jogo-sombra .lig-figura { font-size: 2.8rem; }

/* ===================== TOAST ===================== */
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--azul); color: #fff; padding: 13px 26px; border-radius: 100px;
  box-shadow: var(--sombra); opacity: 0; pointer-events: none; transition: all .3s; z-index: 50; font-size: .95rem;
}
.toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 560px) {
  .abas { top: 58px; }
  .aba { padding: 10px 14px; font-size: .9rem; }
  .ligar-area { grid-template-columns: 1fr; }
}