/* =====================================================================
   JOGOS — 7 Letras · Forca Literária · Quem Escreveu?
   ===================================================================== */

.jogo-pagina { max-width: 900px; margin: 0 auto; }

/* Publicidade externa ao jogo: lateral fixa em telas largas e unidade em
   fluxo nas menores. Nunca cobre tabuleiro, teclado ou botões. */
.jogo-layout-publicidade { width: 100%; max-width: 1120px; margin: 0 auto; }
.jogo-publicidade { width: min(728px, 100%); margin: 24px auto 0; }
.jogo-publicidade .anuncio { width: 100%; min-height: 90px; margin: 0; overflow: hidden; }

@media (min-width: 1200px) {
  .jogo-layout-publicidade {
    width: min(1160px, calc(100vw - 28px));
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: minmax(0, 900px) minmax(160px, 200px);
    align-items: start;
    gap: 28px;
  }
  .jogo-layout-publicidade .jogo-pagina { width: 100%; margin: 0; }
  .jogo-publicidade {
    width: 100%;
    margin: 0;
    position: sticky;
    top: calc(var(--topo-alt) + 18px);
  }
  .jogo-publicidade .anuncio { min-height: 600px; }
}

/* barra de progresso + data (7 Letras) e cabeçalhos de jogo */
.jogo-cabecalho {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.jogo-cabecalho h1 { font-size: 1.5rem; }
.jogo-ajuda {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--linha);
  background: var(--papel-vivo);
  font-family: var(--f-display); font-weight: 700; font-size: .85rem;
  color: var(--tinta-2);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.jogo-ajuda:hover { border-color: var(--grena); color: var(--grena); }
.jogo-data {
  margin-left: auto;
  font-size: .78rem; color: var(--tinta-2);
  background: var(--papel-vivo);
  border: 1px solid var(--linha);
  border-radius: var(--pilula);
  padding: 4px 12px;
  white-space: nowrap;
}

.setel-progresso {
  display: flex; align-items: center; gap: 12px;
  background: var(--papel-vivo);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 10px 16px;
  margin-bottom: 16px;
}
.setel-nivel { font-family: var(--f-display); font-weight: 700; font-size: .9rem; color: var(--grena); white-space: nowrap; }
.setel-barra { flex: 1; height: 6px; background: var(--papel-fundo); border-radius: 3px; overflow: hidden; }
.setel-barra-cheia { height: 100%; width: 0; background: var(--grena); border-radius: 3px; transition: width .5s ease; }
.setel-contagem {
  font-size: .78rem; font-weight: 700; color: var(--tinta-2);
  background: var(--papel-fundo);
  border-radius: var(--pilula);
  padding: 2px 10px;
  white-space: nowrap;
}

/* mensagem de feedback */
.jogo-mensagem {
  min-height: 26px;
  text-align: center;
  font-family: var(--f-display); font-weight: 600; font-size: .95rem;
  color: var(--tinta-2);
  margin-bottom: 4px;
  transition: opacity .2s;
}
.jogo-mensagem.boa { color: var(--verde); }
.jogo-mensagem.otima { color: var(--ouro-texto); }
.jogo-mensagem.ruim { color: var(--grena); }

/* ---------- layout do 7 Letras ---------- */
.setel-layout {
  display: grid;
  grid-template-columns: 1fr clamp(300px, 40vw, 420px);
  gap: 24px;
  align-items: start;
}
/* impede o "grid blowout": sem isto, a largura mínima dos itens vira a soma
   das colunas de palavras e a caixa vaza para fora da tela */
.setel-layout > * { min-width: 0; max-width: 100%; }

.setel-esquerda { text-align: center; }

.setel-palavra {
  min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.5rem; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta);
  margin-bottom: 6px;
}
.setel-palavra .central-cor { color: var(--grena); }
.setel-palavra .cursor {
  display: inline-block; width: 2px; height: 1.2em;
  background: var(--grena);
  margin-left: 2px;
  animation: piscar 1s step-end infinite;
}
@keyframes piscar { 50% { opacity: 0; } }
.setel-palavra.tremer { animation: tremer .3s; }
@keyframes tremer {
  20% { transform: translateX(-7px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(3px); }
}

/* roda de letras */
.setel-roda {
  position: relative;
  width: min(300px, 78vw);
  aspect-ratio: 1;
  margin: 0 auto 14px;
}
.setel-letra {
  position: absolute;
  left: 50%; top: 50%;
  width: 21%; aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--linha);
  background: var(--papel-vivo);
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.2rem, 4vw, 1.6rem);
  text-transform: uppercase;
  color: var(--tinta);
  box-shadow: var(--sombra);
  transition: transform .12s, background .12s;
  display: flex; align-items: center; justify-content: center;
}
.setel-letra:hover { background: var(--papel-fundo); }
.setel-letra:active { transform: translate(var(--tx), var(--ty)) scale(.92) !important; }
.setel-letra.central {
  background: var(--grena);
  border-color: var(--grena);
  color: #FDFAF2;
}
.setel-letra.central:hover { background: var(--grena-vivo); }

.setel-acoes { display: flex; justify-content: center; gap: 10px; }

/* caixa de palavras — larguras calculadas pelo JS em pixels */
.setel-palavras {
  background: var(--papel-vivo);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 14px 16px;
  height: 460px;
  display: flex; flex-direction: column;
}
.setel-palavras-titulo {
  font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--tinta-2);
  margin-bottom: 10px;
}
.setel-grade {
  flex: 1; min-height: 0;
  min-width: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--linha) transparent;
}
.setel-grade::-webkit-scrollbar { height: 6px; }
.setel-grade::-webkit-scrollbar-track { background: transparent; }
.setel-grade::-webkit-scrollbar-thumb { background: var(--linha); border-radius: 999px; }
.setel-coluna { flex: 0 0 auto; box-sizing: border-box; }

.setel-fileira { display: flex; gap: 2px; margin-bottom: 6px; }
.setel-slot {
  width: 20px; height: 24px;
  border-radius: 3px;
  background: var(--papel-fundo);
  border: 1px solid var(--linha);
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-weight: 700; font-size: .72rem;
  text-transform: uppercase;
  color: var(--tinta);
  flex-shrink: 0;
}
.setel-slot.cheio { background: var(--grena); border-color: var(--grena); color: #FDFAF2; }
.setel-fileira.pangrama .setel-slot.cheio { background: var(--ouro); border-color: var(--ouro); color: var(--tinta); }
.setel-slot.pop { animation: pop .28s ease; }
@keyframes pop { 40% { transform: scale(1.3); } }

/* ---------- Forca Literária ---------- */
.forca-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  align-items: start;
  background: var(--papel-vivo);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 28px;
}
.forca-desenho svg { width: 100%; height: auto; }
/* tinteiro: o nível de tinta desce suavemente a cada erro */
.tinteiro #tintaNivel, .tinteiro #tintaSuperficie { transition: y .5s ease, height .5s ease, cy .5s ease, opacity .5s; }
.tinteiro-pena { transform-origin: 124px 118px; transform: rotate(6deg); }
.tinteiro-respingos { transition: opacity .5s; }

.forca-direita { min-width: 0; }
.forca-dica {
  font-size: .82rem; color: var(--tinta-2);
  margin-bottom: 18px;
}
.forca-dica b { color: var(--grena); text-transform: uppercase; letter-spacing: .06em; font-size: .76rem; }

.forca-palavra {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 24px;
}
.forca-letra-slot {
  width: 36px; height: 44px;
  border-bottom: 3px solid var(--tinta-2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-weight: 700; font-size: 1.5rem;
  text-transform: uppercase;
  color: var(--tinta);
}
.forca-letra-slot.revelada { animation: pop .3s ease; }
.forca-letra-slot.perdida { color: var(--grena); border-bottom-color: var(--grena); }

.forca-teclado {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 6px;
  max-width: 480px;
}
.forca-tecla {
  height: 40px;
  border: 1.5px solid var(--linha);
  border-radius: var(--raio);
  background: var(--papel);
  font-family: var(--f-ui); font-weight: 700; font-size: .95rem;
  text-transform: uppercase;
  color: var(--tinta);
  transition: all .12s;
}
.forca-tecla:hover:not(:disabled) { border-color: var(--grena); color: var(--grena); }
.forca-tecla:disabled { cursor: default; opacity: .35; }
.forca-tecla.acerto { background: var(--verde); border-color: var(--verde); color: #FDFAF2; opacity: 1; }
.forca-tecla.erro { background: var(--papel-fundo); text-decoration: line-through; }

.forca-status { margin-top: 20px; font-size: .85rem; color: var(--tinta-2); }

/* ---------- Quem Escreveu? ---------- */
.quiz-caixa {
  background: var(--papel-vivo);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 32px;
  max-width: 680px;
  margin: 0 auto;
}
.quiz-topo {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .8rem; color: var(--tinta-2);
  margin-bottom: 20px;
}
.quiz-pontos { font-weight: 700; color: var(--grena); }

.quiz-citacao {
  font-family: var(--f-leitura); font-style: italic;
  font-size: clamp(1.15rem, 2.6vw, 1.45rem);
  line-height: 1.55;
  color: var(--tinta);
  text-align: center;
  margin: 0 0 8px;
}
.quiz-citacao::before { content: '“'; color: var(--grena); font-size: 1.4em; }
.quiz-citacao::after { content: '”'; color: var(--grena); font-size: 1.4em; }
.quiz-obra {
  text-align: center;
  font-size: .82rem; color: var(--tinta-2);
  margin-bottom: 26px;
}

.quiz-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quiz-opcao {
  border: 1.5px solid var(--linha);
  border-radius: var(--raio);
  background: var(--papel);
  padding: 14px 16px;
  font-family: var(--f-display); font-weight: 600; font-size: 1rem;
  color: var(--tinta);
  transition: all .15s;
  text-align: center;
}
.quiz-opcao:hover:not(:disabled) { border-color: var(--grena); color: var(--grena); transform: translateY(-2px); }
.quiz-opcao:disabled { cursor: default; }
.quiz-opcao.correta { background: var(--verde); border-color: var(--verde); color: #FDFAF2; }
.quiz-opcao.errada { background: var(--grena); border-color: var(--grena); color: #FDFAF2; opacity: .85; }

.quiz-proxima { margin-top: 22px; text-align: center; min-height: 48px; }

/* ---------- modais de jogo (ajuda / vitória) ---------- */
.jogo-modal-icone { text-align: center; font-size: 2.6rem; margin-bottom: 8px; }
.jogo-modal-sub { text-align: center; color: var(--tinta-2); margin: 0 0 20px; }
.jogo-stats { display: flex; gap: 10px; margin: 20px 0; }
.jogo-stat {
  flex: 1; text-align: center;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 12px 4px;
}
.jogo-stat b { display: block; font-family: var(--f-display); font-size: 1.4rem; color: var(--grena); }
.jogo-stat span { font-size: .68rem; color: var(--tinta-2); }
.jogo-regras { font-size: .92rem; }
.jogo-regras li { margin-bottom: 8px; }
.jogo-regras b { color: var(--grena); }

/* confete */
.confete {
  position: fixed;
  width: 8px; height: 12px;
  top: -16px;
  z-index: 900;
  animation: cair linear forwards;
  pointer-events: none;
}
@keyframes cair {
  to { transform: translateY(105vh) rotate(660deg); opacity: .6; }
}

/* ---------- responsivo ---------- */
@media (max-width: 768px) {
  .jogo-cabecalho { margin-bottom: 10px; gap: 8px; }
  .jogo-cabecalho h1 { font-size: 1.25rem; }
  .jogo-data { font-size: .7rem; padding: 3px 9px; }
  .jogo-mensagem { min-height: 22px; font-size: .88rem; }

  /* 7 Letras */
  .jogo-pagina { max-width: 100%; overflow-x: clip; }
  .setel-layout { grid-template-columns: 1fr; gap: 12px; }
  .setel-palavras { width: 100%; height: 172px; padding: 8px 10px; order: -1; }
  .setel-palavras-titulo { margin-bottom: 6px; font-size: .7rem; }
  .setel-grade {
    overflow-x: auto; overflow-y: hidden;
    padding-bottom: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .setel-grade::-webkit-scrollbar { display: none; }
  .setel-slot { width: 18px; height: 22px; font-size: .68rem; }
  .setel-fileira { gap: 2px; margin-bottom: 4px; }
  .setel-roda { width: min(238px, 64vw); margin-bottom: 10px; }
  .setel-palavra { font-size: 1.25rem; min-height: 34px; margin-bottom: 4px; }
  .setel-progresso { padding: 6px 10px; gap: 8px; margin-bottom: 10px; }
  .setel-nivel { font-size: .78rem; }
  .setel-contagem { font-size: .7rem; }
  .setel-acoes .botao-pequeno { padding: 7px 14px; font-size: .82rem; }

  /* Forca */
  .forca-layout { grid-template-columns: 1fr; padding: 18px 14px; gap: 16px; }
  .forca-desenho { max-width: 160px; margin: 0 auto; }
  .forca-dica { text-align: center; }
  .forca-palavra { gap: 6px; margin-bottom: 18px; justify-content: center; }
  .forca-letra-slot { width: 26px; height: 36px; font-size: 1.1rem; }
  .forca-teclado { grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); max-width: none; }
  .forca-tecla { height: 38px; font-size: .88rem; }
  .forca-status { text-align: center; }

  /* Quiz */
  .quiz-caixa { padding: 20px 14px; }
  .quiz-citacao { font-size: 1.1rem; }
  .quiz-opcoes { grid-template-columns: 1fr; gap: 9px; }
  .quiz-opcao { padding: 12px 14px; font-size: .95rem; }
}