/* =========================================================
   Jogos para minha mãe — estilos comuns
   Feito para a terceira idade: letras grandes, botões grandes,
   pouca coisa na tela e um só tema claro, de bom contraste.
   Layout: uma coluna central; dentro de cada jogo, o tabuleiro
   vem logo no começo da tela.
   ========================================================= */

:root {
  /* papel e tinta */
  --papel: #EEF2F7;
  --cartao: #FFFFFF;
  --tinta: #172033;
  --tinta-suave: #3E495D;
  --linha: #C9D1DD;
  --linha-forte: #8E9AAD;

  /* destaque: azul cobalto e amarelo-sol */
  --cobalto: #2350C8;
  --cobalto-forte: #1A3E9E;
  --cobalto-suave: #E1E8FA;
  --sobre-cobalto: #FFFFFF;
  --sol: #FFC83D;
  --sobre-sol: #2B2100;

  /* estados */
  --ok: #1F7A45;
  --ok-suave: #DDF3E5;
  --erro: #C22B37;
  --erro-suave: #FCE2E4;
  --aviso-fundo: #FFF4D6;
  --aviso-borda: #E2A72E;

  /* marcadores do caça-palavras */
  --hl-1: #FFE27A;
  --hl-2: #FFB5CB;
  --hl-3: #B4EAA2;
  --hl-4: #A6D2FF;
  --hl-5: #FFC694;
  --hl-6: #D5C0FF;
  --hl-7: #9FEBDA;
  --hl-8: #FFAFA3;

  /* mesa e cartas da paciência */
  --mesa: #2E7A55;
  --mesa-borda: rgb(255 255 255 / .4);
  --carta: #FFFFFF;
  --carta-borda: #C9D0DA;
  --carta-preta: #1B2230;
  --carta-vermelha: #C8202F;
  --carta-verso: #2350C8;
  --carta-verso-2: #4A72DD;

  /* palavra secreta */
  --t-certo: #2B8F52;
  --t-existe: #C98F0A;
  --t-nao: #737D8C;
  --sobre-t: #FFFFFF;

  /* sudoku */
  --sdk-sel: #BCCDFF;
  --sdk-rel: #EAF0FD;
  --sdk-igual: #D2DEFF;

  --sombra: 0 1px 2px rgb(23 32 51 / .06), 0 6px 18px rgb(23 32 51 / .08);
  --sombra-forte: 0 18px 50px rgb(23 32 51 / .28);
  --veu: rgb(23 32 51 / .55);

  /* tipografia */
  --fonte-titulo: "Fredoka", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --fonte-texto: "Atkinson Hyperlegible", Verdana, "Segoe UI", system-ui, sans-serif;

  --raio: 16px;
  --raio-p: 12px;
  --largura: 1080px;

  color-scheme: light;
}

/* ---------- base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 125%;
  -webkit-text-size-adjust: 100%;
  /* sem o clarão azul do celular a cada toque: cada jogo já mostra o que foi tocado */
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  line-height: 1.5;
}

h1, h2, h3 {
  text-wrap: balance;
}

:focus-visible {
  outline: 3px solid var(--sol);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- topo ---------- */

.topo {
  background: var(--cartao);
  border-bottom: 1px solid var(--linha);
}

.topo-dentro,
.conteudo {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.topo-dentro {
  padding-block: 12px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--tinta);
  text-decoration: none;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  /* diminui um pouco em celular estreito para o nome caber numa linha só */
  font-size: clamp(1.05rem, 6.2vw, 1.35rem);
  line-height: 1.1;
}

.marca-nome {
  text-wrap: balance;
}

.marca-logo {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
}

.conteudo {
  flex: 1;
  padding-block: 20px 48px;
}

/* ---------- botões ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 3.2rem;
  padding: .5rem 1.2rem;
  border: 2px solid var(--linha-forte);
  border-radius: var(--raio-p);
  background: var(--cartao);
  color: var(--tinta);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, transform .1s;
}

.botao:hover {
  border-color: var(--tinta);
}

.botao:active {
  transform: translateY(1px);
}

.botao:disabled {
  opacity: .45;
  cursor: default;
  transform: none;
}

.botao.principal {
  background: var(--cobalto);
  border-color: var(--cobalto);
  color: var(--sobre-cobalto);
}

.botao.principal:hover {
  background: var(--cobalto-forte);
  border-color: var(--cobalto-forte);
}

.barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.barra .botao {
  flex: 1 1 8rem;
}

.cartao {
  background: var(--cartao);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

.aviso {
  min-height: 1.5em;
  margin: 0;
  color: var(--tinta);
  font-weight: 700;
}

.aviso.bom { color: var(--ok); }
.aviso.ruim { color: var(--erro); }

/* ---------- início ---------- */

.boas-vindas h1 {
  margin: 0 0 .25rem;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: clamp(1.8rem, 6vw, 2.4rem);
  line-height: 1.15;
}

.boas-vindas p {
  margin: 0;
  font-size: 1.05rem;
}

/* ---------- valores do site ---------- */

.icone-certo {
  flex: none;
  width: 1.5em;
  height: 1.5em;
}

.icone-certo circle {
  fill: var(--ok);
}

.icone-certo path {
  fill: none;
  stroke: var(--ok-suave);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.boas-vindas .selo-seguro {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-top: .75rem;
  color: var(--ok);
  font-size: 1rem;
  font-weight: 700;
}

.link-saiba-mais {
  /* área de toque mais alta sem empurrar o texto */
  display: inline-block;
  padding: .55rem .15rem;
  margin: -.55rem 0;
  border: 0;
  background: none;
  color: var(--cobalto);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.compromisso {
  display: grid;
  gap: 14px;
  margin-top: 28px;
  padding: 22px clamp(16px, 4vw, 32px);
  border: 3px solid var(--ok-suave);
  border-radius: var(--raio);
  background: var(--cartao);
  scroll-margin-top: 16px;
}

.compromisso h2 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: clamp(1.4rem, 4.5vw, 1.8rem);
  line-height: 1.2;
}

.compromisso-intro,
.assinatura {
  max-width: 38em;
  margin: 0;
}

.compromisso-lista {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 760px) {
  .compromisso-lista {
    grid-template-columns: 1fr 1fr;
    gap: 14px 28px;
  }
}

.compromisso-lista li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
}

.compromisso-lista .icone-certo {
  margin-top: .05em;
}

.alerta-golpe {
  max-width: 40em;
  padding: 14px 16px;
  border-left: 6px solid var(--aviso-borda);
  border-radius: var(--raio-p);
  background: var(--aviso-fundo);
}

.assinatura {
  color: var(--tinta-suave);
}

.voltar-aos-jogos {
  justify-self: start;
}

.vitrine {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 760px) {
  .vitrine { grid-template-columns: 1fr 1fr; }
  .vitrine > li:first-child { grid-column: 1 / -1; }
}

.cartao-jogo {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 100%;
  padding: 16px;
  border: 3px solid transparent;
  border-radius: var(--raio);
  background: var(--cartao);
  box-shadow: var(--sombra);
  color: var(--tinta);
  text-decoration: none;
  transition: border-color .15s;
}

.cartao-jogo:hover {
  border-color: var(--cobalto);
}

.cartao-texto {
  display: grid;
  justify-items: start;
  gap: .3rem;
  min-width: 0;
}

.cartao-texto h2 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.2;
}

.cartao-texto p {
  margin: 0 0 .35rem;
  color: var(--tinta-suave);
}

.selo-jogar {
  padding: .4rem 1.3rem;
  border-radius: 999px;
  background: var(--cobalto);
  color: var(--sobre-cobalto);
  font-weight: 700;
}

.miniatura {
  flex: none;
  display: grid;
  place-items: center;
  width: 108px;
  aspect-ratio: 1;
  border-radius: var(--raio-p);
  background: var(--papel);
  overflow: hidden;
}

.destaque .miniatura {
  width: 150px;
}

.destaque .cartao-texto h2 {
  font-size: 1.7rem;
}

@media (max-width: 480px) {
  .cartao-jogo { gap: 14px; padding: 14px; }
  .miniatura { width: 80px; }
  .destaque .miniatura { width: 96px; }
  .cartao-texto h2 { font-size: 1.2rem; }
  .destaque .cartao-texto h2 { font-size: 1.35rem; }
}

/* ---------- página de jogo ---------- */

/* Cada jogo fica numa coluna no meio da tela, da largura dele (definida no CSS de cada jogo) */
.pagina-jogo {
  max-width: var(--largura-jogo, 880px);
  margin-inline: auto;
}

.cabecalho-jogo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 10px;
}

.cabecalho-jogo h1 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  line-height: 1.15;
}

.voltar {
  min-height: 2.9rem;
  padding: .3rem 1rem;
}

.como-jogar {
  max-width: 40em;
  margin: 0 0 16px;
}

/* ---------- caixa de mensagem ---------- */

.dialogo {
  width: min(440px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: var(--cartao);
  color: var(--tinta);
  box-shadow: var(--sombra-forte);
}

.dialogo::backdrop {
  background: var(--veu);
}

.dialogo-corpo {
  display: grid;
  gap: 14px;
  padding: 28px 24px 24px;
  text-align: center;
}

.dialogo-selo {
  display: grid;
  place-items: center;
  width: 4.2rem;
  height: 4.2rem;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--sol);
  color: var(--sobre-sol);
  font-size: 2.2rem;
  line-height: 1;
}

.dialogo-titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1.8rem;
  line-height: 1.15;
}

.dialogo-texto {
  margin: 0;
}

.dialogo-acoes {
  display: grid;
  gap: 10px;
  margin-top: 6px;
}

.confete {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

/* ---------- animações ---------- */

@keyframes balancar {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.balanca {
  animation: balancar .35s ease;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}