/* Jardim de papel — guia "Como jogar" (kit da coleção) e tutorial jogável (2.2.0).
   Só apresentação: cores de papel do jogo para o guia, a Patrícia no topo do guia, a caixa de dica
   ancorada no alvo durante o tutorial e o botão "Pular tutorial" do HUD. */

/* ---------- Guia: variáveis do kit na paleta de papel ---------- */
.cj-fundo {
  --cj-painel: #f4ead6;
  --cj-painel-2: #fbf6ea;
  --cj-texto: #3a3327;
  --cj-suave: #6d6252;
  --cj-destaque: #41653a;
  --cj-destaque-texto: #fbf7ee;
  --cj-borda: #c9b48c;
  --cj-fonte: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cj-raio: 18px;
  background: rgba(60, 68, 66, .58);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.cj-fundo .cj-painel {
  border: 1px solid var(--cj-borda);
  box-shadow: 0 10px 0 rgba(58, 51, 39, .16), 0 22px 44px rgba(0, 0, 0, .24);
}
.cj-fundo .cj-topo h2 { font-size: 1.45rem; letter-spacing: 0; }
.cj-fundo .cj-titulo-cartao { font-family: var(--fonte); font-size: 1.2rem; }
.cj-fundo .cj-clipe { background: #cfd9d6; border-color: var(--cj-borda); }
.cj-fundo .cj-controles { background: rgba(214, 193, 154, .28); }

/* A Patrícia apresenta: quadro do atlas da anfitriã, animado enquanto o guia está aberto. */
.gz-guia-anfitria {
  display: block; flex: none;
  width: 68px; height: 68px;
  border-radius: 14px; overflow: hidden;
  background: radial-gradient(circle at 50% 75%, #efe3c8, #e2d0ab);
  border: 1px solid var(--cj-borda);
}
.gz-guia-anfitria canvas {
  display: block; width: 100%; height: 100%;
  image-rendering: pixelated; image-rendering: crisp-edges;
}
/* Celular em pé: o cartão de controles com a lista do teclado aberta ainda cabe sem rolagem em 390×844. */
@media (max-width: 600px) {
  .gz-guia-anfitria { width: 56px; height: 56px; }
  .cj-fundo .cj-clipe video { max-height: min(31dvh, 270px); }
  .cj-fundo .cj-lista { gap: 4px; }
  .cj-fundo .cj-lista li { min-height: 34px; }
}
/* Celular deitado: cabeçalho baixo para sobrar altura para o clipe. */
@media (max-height: 520px) and (orientation: landscape) {
  .gz-guia-anfitria { width: 44px; height: 44px; border-radius: 10px; }
  .cj-fundo .cj-topo h2 { font-size: 1.15rem; }
  /* A lista do teclado (4 linhas) em duas colunas para caber sem rolagem. */
  .cj-fundo .cj-lista { grid-template-columns: 1fr 1fr; column-gap: 10px; }
  .cj-fundo .cj-icones { min-width: 0; }
  .cj-fundo .cj-acao { font-size: .88rem; line-height: 1.2; }
}

/* ---------- Tutorial jogável: a caixa de dica vira um balão junto do alvo ---------- */
#dica.tutorial {
  display: flex; align-items: center; gap: 10px;
  bottom: auto; transform: none;
  width: max-content; max-width: 300px;
  padding: 9px 13px;
  background: #fbf5e7; color: var(--tinta);
  border: 2px solid var(--terracota-escura); border-radius: 14px;
  box-shadow: 0 3px 0 var(--sombra), 0 8px 22px rgba(58, 51, 39, .18);
}
#dica.tutorial[hidden] { display: none; }
#dica.tutorial p {
  margin: 0; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  text-align: left; font-size: 15px; line-height: 1.38;
}
#dica.tutorial strong { display: block; color: var(--terracota-escura); }
#dica .dica-controle { flex: none; width: 36px; height: 36px; color: var(--terracota-escura); }
#dica .dica-controle[hidden] { display: none; }
#dica .dica-controle svg { display: block; width: 100%; height: 100%; }
#dica .dica-alt { display: block; margin-top: 4px; font-size: 13px; color: var(--tinta-suave); }
#dica kbd {
  display: inline-grid; place-items: center;
  min-width: 26px; height: 26px; padding: 0 6px; margin: 1px 0;
  font: 700 13px/1 var(--fonte-ui); color: #fbf7ee;
  background: var(--folha-escura);
  border: 1px solid #2c4727; border-bottom-width: 3px; border-radius: 6px;
  vertical-align: middle;
}
/* Seta do balão apontando para o alvo; --seta é a distância da ponta até o canto do balão. */
#dica.tutorial::after {
  content: ""; position: absolute;
  width: 14px; height: 14px;
  background: #fbf5e7;
  border: 2px solid var(--terracota-escura);
  transform: rotate(45deg);
}
#dica.tutorial:not(.seta-esq):not(.seta-dir):not(.seta-cima):not(.seta-baixo)::after { display: none; }
#dica.seta-esq::after { left: -8px; top: calc(var(--seta, 20px) - 7px); border-top: 0; border-right: 0; }
#dica.seta-dir::after { right: -8px; top: calc(var(--seta, 20px) - 7px); border-bottom: 0; border-left: 0; }
#dica.seta-cima::after { top: -8px; left: calc(var(--seta, 20px) - 7px); border-bottom: 0; border-right: 0; }
#dica.seta-baixo::after { bottom: -8px; left: calc(var(--seta, 20px) - 7px); border-top: 0; border-left: 0; }

/* ---------- Botão "Pular tutorial" no HUD ---------- */
.chip-botao {
  font: inherit; font-size: 13px; font-weight: 650;
  min-height: 44px; padding: 0 14px;
  color: var(--tinta); cursor: pointer;
}
.chip-botao[hidden] { display: none; }
.chip-botao:hover { background: #fff8ea; }
@media (max-width: 480px) { .chip-botao .so-largo { display: none; } }

/* Pausa com "Como jogar" e "Refazer tutorial": em telas baixas os botões ficam em duas colunas. */
@media (max-height: 520px) {
  #tela-pausa .botoes.coluna { display: grid; grid-template-columns: 1fr 1fr; margin-top: 10px; }
  #tela-pausa .botoes.coluna .principal { grid-column: 1 / -1; }
  #tela-pausa h2 { margin-bottom: 4px; font-size: 26px; }
  #tela-pausa .controle-volume { margin-top: 6px; }
  #tela-pausa button.principal, #tela-pausa button.secundario { padding: 9px 16px; }
}