/* ==========================================================================
   PANHÔ! v2 — folha de estilo

   Todas as cores e fontes vêm do design system da campanha, importado antes
   deste arquivo:
     DS/tokens/colors.css      → variáveis --pt-*
     DS/tokens/typography.css  → Qanelas (títulos) e Barlow (corpo), locais

   Regra do DS: nada de hex solto aqui. As duas exceções estão declaradas
   logo abaixo, com o motivo.
   ========================================================================== */

:root{
  /* Escurecimento do azul marinho da marca, para o modo noite do jogo. Não é
     cor nova: é o --pt-azul-marinho rebaixado, usado só como fundo de cena. */
  --jogo-noite: #1B0D4A;
  /* Bordas e véus precisam de transparência, que token nenhum carrega. */
  --jogo-borda: rgba(56,56,56,.16);
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{height:100%}

body{
  background:var(--pt-cinza-100);
  color:var(--pt-cinza-escuro);
  font-family:var(--font-body);
  overscroll-behavior-y:contain;
  -webkit-font-smoothing:antialiased;
  display:flex;
  justify-content:center;
  padding:24px 16px 40px;
}

.wrap{width:100%;max-width:960px}

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

.topo{text-align:center;margin-bottom:18px}

.logo{
  display:block;
  width:100%;
  max-width:330px;
  height:auto;
  margin:0 auto 14px;
}

.titulo{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(38px,8vw,66px);
  line-height:.95;
  letter-spacing:-.02em;
  color:var(--pt-azul-marinho);
  text-transform:uppercase;
}
.titulo span{color:var(--pt-amarelo);-webkit-text-stroke:2px var(--pt-azul-marinho)}

.sub{
  margin-top:8px;
  font-size:clamp(14px,2.4vw,17px);
  color:var(--pt-cinza-escuro);
  max-width:520px;
  margin-inline:auto;
}

/* ---------- palco / canvas ---------- */

.palco{
  position:relative;
  margin-inline:auto;
  background:var(--pt-cinza-100);
  border:2px solid var(--pt-azul-marinho);
  border-radius:2px;
  overflow:hidden;
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}

#jogo{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:900/280;   /* padrão; o JS troca em tela estreita */
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}

/* ---------- HUD ---------- */

.hud{
  position:absolute;
  top:10px;right:12px;
  display:flex;
  gap:16px;
  pointer-events:none;
  text-align:right;
}
.hud-item{display:flex;flex-direction:column;line-height:1}
.hud-item.esconde{display:none}

.hud-lab{
  font-family:var(--font-body);
  font-weight:800;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--pt-cinza-600);
}
.hud-val{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(16px,2.6vw,23px);
  color:var(--pt-azul-marinho);
  margin-top:3px;
  font-variant-numeric:tabular-nums;
}
.hud-rec{color:var(--pt-cinza-600)}
.hud-val.pisca{color:var(--pt-verde)}

/* selo do bônus de pontuação dobrada */
.hud-xp .hud-lab{color:var(--pt-laranja)}
.hud-xp .hud-val{color:var(--pt-laranja)}

/* ---------- botão de som ---------- */

.btn-som{
  position:absolute;
  top:10px;left:12px;
  font-family:var(--font-body);
  font-weight:800;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--pt-cinza-600);
  background:transparent;
  border:1px solid var(--jogo-borda);
  border-radius:2px;
  padding:4px 8px;
  cursor:pointer;
}
.btn-som:hover{color:var(--pt-azul-marinho);border-color:var(--pt-azul-marinho)}

/* ---------- modo noite ---------- */

.palco.noite .hud-lab{color:rgba(245,245,243,.55)}
.palco.noite .hud-val{color:var(--pt-branco)}
.palco.noite .hud-rec{color:rgba(245,245,243,.45)}
.palco.noite .hud-val.pisca{color:var(--pt-amarelo)}
.palco.noite .hud-xp .hud-lab,
.palco.noite .hud-xp .hud-val{color:var(--pt-amarelo)}
.palco.noite .btn-som{color:rgba(245,245,243,.55);border-color:rgba(245,245,243,.22)}
.palco.noite .btn-som:hover{color:var(--pt-amarelo);border-color:var(--pt-amarelo)}

/* ---------- telas sobre o canvas ---------- */

.tela{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:20px;
  text-align:center;
  background:rgba(245,245,243,.93);
}
.tela-off{display:none}

.tela-tit{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(19px,4.2vw,31px);
  text-transform:uppercase;
  letter-spacing:-.01em;
  color:var(--pt-azul-marinho);
}

.tela-txt{
  font-size:clamp(13px,2.4vw,16px);
  color:var(--pt-cinza-escuro);
  max-width:440px;
}

/* a tela de fim é só o botão: a cena com o Pedro, o balão e o carro precisa
   continuar visível atrás */
.tela-fim{
  inset:auto 0 0 0;
  background:transparent;
  padding:0 0 10px;
  gap:0;
}
.tela-fim .botao{margin-top:0;padding:9px 24px}

/* texto só para leitor de tela: o resultado visível é desenhado no canvas */
.so-leitor{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.botao{
  margin-top:4px;
  font-family:var(--font-body);
  font-weight:800;
  font-size:16px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--pt-azul-marinho);
  background:var(--pt-amarelo);
  border:2px solid var(--pt-azul-marinho);
  border-radius:2px;
  padding:11px 26px;
  cursor:pointer;
}
.botao:hover{background:var(--pt-azul-marinho);color:var(--pt-amarelo)}
.botao:active{transform:translateY(1px)}

/* ---------- controles touch ---------- */

.controles{display:none;gap:10px;margin-top:12px}
.ctrl{
  flex:1;
  font-family:var(--font-body);
  font-weight:800;
  font-size:15px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--pt-branco);
  background:var(--pt-azul-marinho);
  border:2px solid var(--pt-azul-marinho);
  border-radius:2px;
  padding:16px 0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.ctrl:active{background:var(--pt-amarelo);color:var(--pt-azul-marinho)}

body.touch .controles{display:flex}

/* instruções e legenda mudam conforme o aparelho */
.so-toque{display:none}
body.touch .so-teclado{display:none}
body.touch .so-toque{display:inline}
body.touch .leg-atalhos{display:none}

/* ---------- nível de dificuldade ---------- */

.nivel{
  margin-top:14px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 14px;
}
.nivel-lab{
  font-family:var(--font-body);
  font-weight:800;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--pt-cinza-600);
}
.nivel-opcoes{display:flex;gap:6px}
.niv{
  font-family:var(--font-body);
  font-weight:800;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--pt-azul-marinho);
  background:transparent;
  border:1px solid var(--jogo-borda);
  border-radius:2px;
  padding:8px 14px;
  cursor:pointer;
}
.niv:hover{border-color:var(--pt-azul-marinho)}
.niv[aria-pressed="true"]{
  background:var(--pt-azul-marinho);
  border-color:var(--pt-azul-marinho);
  color:var(--pt-branco);
}
.nivel-obs{
  font-size:13px;
  color:var(--pt-cinza-600);
  flex-basis:100%;
  min-height:0;
  display:none;
}
.nivel-obs.ativo{display:block}

/* ---------- compartilhar ---------- */

.share{
  margin-top:18px;
  padding:16px 18px;
  border:2px solid var(--jogo-borda);
  border-radius:2px;
  background:var(--pt-branco);
  transition:border-color .25s ease;
}
.share.destaque{border-color:var(--pt-amarelo)}

.share-tit{
  font-family:var(--font-body);
  font-weight:800;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--pt-cinza-600);
  margin-bottom:11px;
}

.share-linha{display:flex;flex-wrap:wrap;gap:8px}

.sh{
  font-family:var(--font-body);
  font-weight:800;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--pt-azul-marinho);
  background:transparent;
  border:1px solid var(--jogo-borda);
  border-left:4px solid var(--pt-azul-marinho);
  border-radius:2px;
  padding:10px 14px;
  cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.sh:hover{background:var(--pt-azul-marinho);color:var(--pt-branco)}
.sh:active{transform:translateY(1px)}
.sh.esconde{display:none}

.sh-nativo{background:var(--pt-amarelo);border-color:var(--pt-azul-marinho)}
.sh-nativo:hover{background:var(--pt-azul-marinho);color:var(--pt-amarelo)}
.sh-whats{border-left-color:var(--pt-verde)}
.sh-whats:hover{background:var(--pt-verde);border-color:var(--pt-verde);color:var(--pt-branco)}
.sh-insta{border-left-color:var(--pt-vermelho)}
.sh-insta:hover{background:var(--pt-vermelho);border-color:var(--pt-vermelho);color:var(--pt-branco)}
.sh-face{border-left-color:var(--pt-azul-acento)}
.sh-face:hover{background:var(--pt-azul-acento);border-color:var(--pt-azul-acento);color:var(--pt-branco)}
.sh-link{border-left-color:var(--pt-cinza-300)}

.share-status{
  margin-top:10px;
  font-size:13px;
  color:var(--pt-cinza-600);
  display:none;
}
.share-status.ativo{display:block}

/* ---------- legenda ---------- */

.legenda{
  margin-top:22px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  border-top:1px solid var(--jogo-borda);
  padding-top:20px;
}

.leg-tit{
  font-family:var(--font-body);
  font-weight:800;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--pt-cinza-600);
  margin-bottom:10px;
}

.leg-lista{list-style:none;display:flex;flex-direction:column;gap:8px}
.leg-lista li{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--pt-cinza-escuro)}
.leg-lista b{font-weight:800;color:var(--pt-azul-marinho)}

.ic{width:18px;height:14px;flex:0 0 18px;border-radius:1px;display:block}
.ic-doc{background:var(--pt-branco);border:2px solid var(--pt-azul-marinho);height:16px}
.ic-dossie{background:var(--pt-amarelo);border:2px solid var(--pt-azul-marinho);height:16px}
.ic-sigilo{background:var(--pt-vermelho);border:2px solid var(--pt-azul-marinho);height:16px}
.ic-buro{background:var(--pt-cinza-300);border:2px solid var(--pt-azul-marinho);border-top-width:5px;height:16px}
.ic-drone{background:var(--pt-azul-marinho);height:9px;border-bottom:5px solid var(--pt-vermelho)}

.leg-teclas li{color:var(--pt-cinza-600);font-size:13px}
kbd{
  font-family:var(--font-body);
  font-weight:800;
  font-size:12px;
  letter-spacing:.04em;
  background:var(--pt-cinza-100);
  border:1px solid var(--jogo-borda);
  border-bottom-width:2px;
  border-radius:2px;
  padding:2px 7px;
  color:var(--pt-azul-marinho);
}

/* ---------- chamada para as propostas ---------- */

.propostas{
  margin-top:22px;
  padding:20px;
  background:var(--pt-azul-marinho);
  border-radius:2px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
}
.propostas-txt{
  color:var(--pt-branco);
  font-size:clamp(15px,2.4vw,18px);
  font-weight:600;
  max-width:56ch;
}
.propostas-btn{
  font-family:var(--font-body);
  font-weight:800;
  font-size:15px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--pt-branco);
  background:var(--pt-laranja);          /* CTA primário do DS */
  border-radius:4px;
  padding:15px 30px;
  text-decoration:none;
  white-space:nowrap;
  transition:background .15s ease;
}
.propostas-btn:hover{background:var(--color-cta-primario-hover)}
.propostas-btn:active{transform:translateY(1px)}

/* ---------- rodapé ---------- */

.rodape{
  margin-top:24px;
  padding-top:14px;
  border-top:1px solid var(--jogo-borda);
  font-size:12px;
  color:var(--pt-cinza-600);
  text-align:center;
}
.rodape-legal{
  margin-top:10px;
  font-size:11px;
  line-height:1.5;
  color:var(--pt-cinza-600);
}

/* ---------- responsivo ----------------------------------------------------
   O corte em 620px é o mesmo que o jogo usa para trocar o mundo de 900 para
   300 de largura.
   -------------------------------------------------------------------------- */

@media (max-width:620px){
  body{padding:14px 10px 28px}

  .topo{margin-bottom:12px}
  .logo{max-width:250px;margin-bottom:10px}
  .titulo{font-size:clamp(32px,11vw,52px)}
  .sub{margin-top:6px;font-size:15px;max-width:36ch}

  .hud{gap:12px;top:8px;right:10px}
  .hud-lab{font-size:10px}
  .hud-val{font-size:19px}
  .btn-som{top:8px;left:10px}

  .controles{gap:10px;margin-top:10px}
  .ctrl{padding:20px 0;font-size:17px;letter-spacing:.12em}

  .nivel{margin-top:12px;justify-content:center}
  .nivel-opcoes{flex:1}
  .niv{flex:1;padding:10px 6px}
  .nivel-obs{text-align:center}

  .share{margin-top:16px;padding:14px}
  .share-linha{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .sh{padding:13px 8px;font-size:11px;letter-spacing:.04em;text-align:center}
  .sh-nativo{grid-column:1 / -1;font-size:13px;padding:15px 8px}

  .legenda{margin-top:18px;padding-top:16px;grid-template-columns:1fr 1fr;gap:14px}
  .leg-col:last-child{grid-column:1 / -1}
  .leg-lista li{font-size:13px}
  .leg-teclas{flex-direction:row;flex-wrap:wrap;gap:6px 16px}

  .propostas{margin-top:18px;padding:16px;flex-direction:column;align-items:stretch;text-align:center}
  .propostas-btn{text-align:center;padding:16px}

  .rodape{margin-top:18px;font-size:11px}
  .rodape-legal{font-size:10px}
}

@media (max-width:400px){
  .sub{font-size:14px}
  .tela-txt{font-size:13px;line-height:1.3}
  .ctrl{font-size:16px;padding:18px 0}
}

/* celular deitado: a tela some de altura, então o topo encolhe bastante */
@media (max-height:480px) and (orientation:landscape){
  body{padding:8px 12px 16px}
  .topo{margin-bottom:8px}
  .logo{max-width:180px;margin-bottom:6px}
  .titulo{font-size:28px}
  .sub{display:none}
  .controles{margin-top:8px}
  .ctrl{padding:12px 0;font-size:14px}
}