/* DEFENSORES DA SAÚDE — o estilo só desta página (docs/68)
 *
 * ARQUIVO PRÓPRIO, e não um bloco no styles.css: a home já pesa ~2 MB (docs/57)
 * e o styles.css é pedido por TODAS as 15 páginas do site. Um jogo que ninguém
 * abriu não pode custar um byte a quem foi ler uma lei aprovada.
 *
 * COR SAI DE TOKEN (regra 2 do CLAUDE.md). Nenhum hex nasce aqui: tudo vem do
 * :root do styles.css, que é carregado antes deste arquivo. Os poucos rgba()
 * são branco e preto com alfa — vidro sobre o fundo escuro, não cor de marca.
 */

/* A página inteira é uma tela só: sem rolagem, sem rebote de scroll no celular
   (o "puxa para atualizar" no meio de uma partida é perda de jogo garantida). */
html:has(body[data-page="jogo"]), body[data-page="jogo"] {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

.jg {
  position: relative;
  display: flex;
  flex-direction: column;
  /* dvh e não vh: no celular a barra do navegador some e volta, e vh mede a
     tela COM a barra — o rodapé da bandeja ficava debaixo dela. */
  height: 100dvh;
  background: var(--fundo-3);
  color: var(--branco);
  font-family: var(--font-texto);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---- HUD ----------------------------------------------------------------- */
/* ---- A CONTA DA PRIMEIRA LINHA, medida a 360px (o celular mais estreito que
   este site atende) e não estimada. Ela já falhou DUAS vezes -- primeiro com o
   "Site" absoluto e depois com a Pausa absoluta, as duas escrevendo por cima do
   orçamento. A terceira versão desiste do absoluto: tudo que vive nesta linha é
   FILHO DO FLEX, e aí a sobreposição deixa de ser possível por construção.

     controle de som (o único absoluto que sobra) ... 121px, começando em x=227
     folga pedida ao HUD ............................ 140px (= 360 - 227 + 7)
     sobra a 360px .................................. 360 - 8 - 140 = 212px
     pausa 36 + corações 3x13+2x3 + 4 gaps de 4 ..... ~97px
     3 números com rótulo ........................... ~106px
     TOTAL .......................................... ~203px

   E A CONTA ANTERIOR ERRAVA POR 16px: ela somava os pedaços de cabeça em vez de
   perguntar ao navegador. A captura acusou -12 de folga a 360. Os números acima
   vieram do `getBoundingClientRect`, medidos nas três larguras. Mexer em
   qualquer um pede remedir — a conta diz que cabe, a captura diz se cabe. */
.jg-hud {
  display: flex; align-items: center; gap: 4px;
  padding: var(--sp-2) var(--sp-2);
  padding-right: 140px;
  min-height: 48px;
}
.jg-pausa-bt {
  width: 36px; height: 36px; flex: 0 0 auto;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.12); border: 0; border-radius: 50%; color: var(--branco);
}
.jg-pausa-bt:hover { background: rgba(255,255,255,.22); }
.jg-pausa-bt .ico-traco { fill: none; stroke: currentColor; }
.jg-vidas { display: flex; gap: 3px; }
/* CORAÇÃO, e não o ladrilho quadrado do cobogó. A 13px o `az-coracao` (um
   quadrado âmbar com um coração branco dentro) lê como QUADRADO — a forma que
   sobrevive ao tamanho pequeno é a da moldura, não a do desenho. */
.jg-vida { width: 13px; height: 13px; display: block; fill: none; stroke: var(--realce); stroke-width: 2.6; }
.jg-num { display: flex; flex-direction: column; line-height: 1.05; margin: 0; }
.jg-num b {
  font-family: var(--font-titulo); font-size: .95rem; font-weight: 700;
  font-variant-numeric: tabular-nums;   /* sem isto o número "pula" a cada abate */
}
.jg-num span { font-size: .5rem; text-transform: uppercase; letter-spacing: .03em; opacity: .7; }

/* ---- som: canto superior direito ----------------------------------------- */
.jg-som {
  position: absolute; top: calc(env(safe-area-inset-top) + var(--sp-2)); right: var(--sp-3);
  z-index: 6; display: flex; align-items: center; gap: var(--sp-2);
  background: rgba(0,0,0,.32); border-radius: var(--raio-pill); padding: 3px 10px 3px 3px;
}
.jg-btn-som {
  width: 44px; height: 44px;         /* a régua de toque do docs/16 */
  display: grid; place-items: center;
  background: none; border: 0; color: var(--branco); cursor: pointer;
  border-radius: 50%;
}
.jg-btn-som:hover { background: rgba(255,255,255,.14); }
/* `.ico-traco` e NUNCA `.btn-ico`: o segundo traz fill:currentColor e vem depois
   no styles.css, então vence o fill:none e o alto-falante vira uma mancha. */
.jg-btn-som .ico-traco { fill: none; stroke: currentColor; }
/* DESLIZADOR e não degraus: volume é contínuo por natureza. */
.jg-volume { width: 74px; accent-color: var(--realce); }
@media (max-width: 420px) { .jg-volume { width: 56px; } }
/* A 380px o deslizador encolhe mais 12px. É o último ajuste da conta da
   primeira linha (ver o bloco do .jg-hud): a 360 a folga era de 6px, e 6px é um
   gap de verdade mas não é margem para a próxima pessoa mexer em nada. */
@media (max-width: 380px) { .jg-volume { width: 44px; } }

.jg-voltar {
  position: absolute; top: calc(env(safe-area-inset-top) + var(--sp-2)); left: var(--sp-3);
  z-index: 6; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 var(--sp-3);
  color: var(--branco); text-decoration: none; font-size: .8rem;
  background: rgba(0,0,0,.32); border-radius: var(--raio-pill);
}
.jg-voltar .ico-traco { fill: none; stroke: currentColor; }
.jg-voltar[hidden] { display: none; }

/* ---- campo --------------------------------------------------------------- */
.jg-campo { position: relative; flex: 1 1 auto; min-height: 0; }
.jg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: manipulation; }

/* O AVISO DE ONDA SAIU DO MEIO DO CAMPO (docs/70 D7). Ele era 3rem no centro,
   por 1,1s, exatamente onde os inimigos estão — o jogo escondia o jogo para
   dizer que o jogo tinha começado. Agora é uma faixa fina logo abaixo do HUD:
   avisa sem tapar, e some sem deixar saudade. */
.jg-aviso {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%) translateY(-6px);
  margin: 0; padding: 4px var(--sp-4);
  background: color-mix(in srgb, var(--petroleo-900) 80%, transparent);
  border-radius: var(--raio-pill);
  font-family: var(--font-titulo); font-size: .95rem; font-weight: 700;
  letter-spacing: .1em; color: var(--realce);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.jg-aviso.e-viva { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- telas sobrepostas --------------------------------------------------- */
/* ROLAR SEM PERDER O CENTRO.
   `place-items:center` num grid CORTA o topo quando o conteúdo é mais alto que
   a caixa — e a tela de fim é: pontuação + teclado de 26 letras + dois botões +
   placar. Na captura, o "ACABOU" ficava debaixo do controle de som e o "Voltar
   ao início" caía por cima da linha legal.
   Flex + `margin:auto` na caixa resolve os dois casos com a mesma regra: centra
   quando cabe, rola do começo quando não cabe.
   O `padding-top` de 60px é a faixa dos controles do topo (44px de botão + 16
   de respiro): sem ele, qualquer tela longa começa debaixo deles. */
.jg-tela {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 60px var(--sp-4) var(--sp-4);
  background: color-mix(in srgb, var(--fundo-3) 92%, transparent);
  backdrop-filter: blur(3px);
}
.jg-tela[hidden] { display: none; }
.jg-tela-caixa { width: min(460px, 100%); margin: auto; text-align: center; }
.jg-tela-rolavel { text-align: left; }

.jg-selo {
  margin: 0 0 var(--sp-2); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--realce);
}
.jg-titulo {
  margin: 0 0 var(--sp-3); font-family: var(--font-titulo); font-weight: 700;
  font-size: clamp(2.2rem, 11vw, 3.4rem); line-height: .95; text-transform: uppercase;
}
.jg-titulo-p { font-size: clamp(1.6rem, 7vw, 2.2rem); }
.jg-lead { margin: 0 0 var(--sp-5); opacity: .88; font-size: .95rem; }
.jg-sub {
  margin: var(--sp-6) 0 var(--sp-2); font-family: var(--font-titulo);
  font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; opacity: .7;
}
.jg-jogar { min-width: 190px; }
.jg-link {
  display: block; margin: var(--sp-3) auto 0; min-height: 44px;
  background: none; border: 0; color: var(--turquesa-300); cursor: pointer;
  font-family: var(--font-texto); font-size: .88rem; text-decoration: underline;
}
.jg-btn-secundario {
  background: transparent; color: var(--branco);
  border: 2px solid rgba(255,255,255,.4);
}
.jg-btn-secundario:hover { border-color: var(--realce); color: var(--realce); }
.jg-acoes { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-4); }

.jg-placar-grande { margin: 0 0 var(--sp-4); display: flex; flex-direction: column; }
.jg-placar-grande b {
  font-family: var(--font-titulo); font-size: clamp(3rem, 18vw, 5rem); line-height: 1;
  color: var(--realce); font-variant-numeric: tabular-nums;
}
.jg-placar-grande span { font-size: .9rem; opacity: .8; }
.jg-placar-grande i { font-style: normal; font-weight: 700; }

/* ---- placar -------------------------------------------------------------- */
.jg-top { list-style: none; margin: 0; padding: 0; font-variant-numeric: tabular-nums; }
.jg-top li {
  display: grid; grid-template-columns: 24px 1fr auto auto; gap: var(--sp-3);
  align-items: center; padding: 5px var(--sp-2);
  border-bottom: 1px solid rgba(255,255,255,.1); font-size: .9rem;
}
.jg-top li b { opacity: .55; font-weight: 500; }
.jg-ini { font-family: var(--font-titulo); font-weight: 700; letter-spacing: .18em; }
.jg-pts { font-weight: 700; color: var(--realce); }
.jg-onda { font-size: .72rem; opacity: .6; }
.jg-vazio { display: block !important; opacity: .6; font-size: .82rem; border: 0; text-align: center; }

/* ---- as três letras ------------------------------------------------------ */
.jg-assinar {
  margin: 0 0 var(--sp-5); padding: var(--sp-4);
  background: rgba(255,255,255,.07); border-radius: var(--raio-sm);
}
.jg-assinar-lead { margin: 0 0 var(--sp-3); font-size: .88rem; opacity: .85; }
.jg-iniciais { display: flex; justify-content: center; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.jg-iniciais span {
  width: 46px; height: 56px; display: grid; place-items: center;
  background: rgba(0,0,0,.3); border-radius: var(--raio-sm);
  font-family: var(--font-titulo); font-size: 2rem; font-weight: 700; color: var(--realce);
}
.jg-teclado { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin-bottom: var(--sp-3); }
.jg-tecla {
  min-height: 44px; border: 0; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,.14); color: var(--branco);
  font-family: var(--font-titulo); font-size: 1rem; font-weight: 600;
}
.jg-tecla:hover { background: var(--turquesa-400); }
.jg-apaga { grid-column: span 4; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.jg-recusado { margin: 0 0 var(--sp-2); min-height: 1.2em; font-size: .82rem; color: var(--realce); }

/* ---- "o que cada bloco significa" ---------------------------------------- */
.jg-ajuda-lista { list-style: none; margin: 0; padding: 0; }
.jg-ajuda-lista li { display: flex; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.jg-ajuda-ico { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 6px; }
.jg-ajuda-lista b { display: block; font-family: var(--font-titulo); font-size: 1.05rem; }
.jg-ajuda-lista span { display: block; font-size: .85rem; opacity: .85; }
.jg-ajuda-lista em { display: block; margin-top: 4px; font-size: .82rem; color: var(--turquesa-300); font-style: italic; }
.jg-ajuda-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--sp-4); padding: 0; }
.jg-tag {
  display: inline-block; padding: 4px 12px; border-radius: var(--raio-pill);
  font-family: var(--font-titulo); font-size: .82rem; color: var(--branco);
}
.jg-ajuda-pe { font-size: .82rem; opacity: .7; margin: 0 0 var(--sp-4); }

/* ---- A FOLHA DO ENCAIXE (docs/70 §3.1) ------------------------------------
   Sobe do pé do campo, não do meio da tela: o polegar vive embaixo, e a metade
   de cima continua mostrando o campo e o anel de alcance — que é metade da
   razão de o popup existir.
   `max-height: 82%` porque as sete opções com descrição E frase não cabem em
   844px; ela rola, e o topo fica ancorado para o título nunca sumir. */
.jg-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 7;
  display: flex; flex-direction: column;
  max-height: 82%;
  background: var(--petroleo-900);
  border-radius: var(--raio-md) var(--raio-md) 0 0;
  box-shadow: 0 -14px 40px rgba(0,0,0,.5);
  animation: jg-sobe .18s ease-out;
}
.jg-sheet[hidden] { display: none; }
@keyframes jg-sobe { from { transform: translateY(18px); opacity: .4 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .jg-sheet { animation: none } }

.jg-sheet-topo {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3) var(--sp-2) var(--sp-4);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.jg-sheet-titulo {
  margin: 0; flex: 1; font-family: var(--font-titulo);
  font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em;
}
.jg-sheet-x {
  width: 44px; height: 44px; flex: 0 0 auto;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.1); border: 0; border-radius: 50%; color: var(--branco);
}
.jg-sheet-x .ico-traco { fill: none; stroke: currentColor; }
.jg-sheet-corpo { overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-2) var(--sp-3) var(--sp-4); }

/* ---- as sete opções ------------------------------------------------------ */
.jg-ops { list-style: none; margin: 0; padding: 0; }
.jg-op {
  width: 100%; min-height: 44px;
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-2); cursor: pointer; text-align: left;
  background: none; border: 0; border-radius: var(--raio-sm); color: var(--branco);
  font-family: var(--font-texto);
}
.jg-op:hover, .jg-op:focus-visible { background: rgba(255,255,255,.09); }
.jg-op-ico { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 6px; }
.jg-op-txt { display: block; min-width: 0; }
.jg-op-txt b {
  display: flex; align-items: baseline; gap: var(--sp-2);
  font-family: var(--font-titulo); font-size: 1rem; font-weight: 600;
}
.jg-op-custo { font-style: normal; color: var(--realce); font-variant-numeric: tabular-nums; }
.jg-op-desc { display: block; font-size: .8rem; opacity: .85; line-height: 1.25; }
/* A FRASE é o motivo de o popup existir (docs/70 §3.1 item 2): é o argumento
   do mandato lido ANTES da escolha, com o jogo parado. Ela não é nota de
   rodapé — é do tamanho do resto e tem cor própria. */
.jg-op-frase {
  display: block; margin-top: 3px; font-size: .78rem; line-height: 1.3;
  color: var(--turquesa-300); font-style: italic;
}
/* SEM `disabled` cinza-morto: a opção cara continua legível, porque o que ela
   ensina é justamente quanto falta. */
.jg-op.e-cara { opacity: .45; cursor: not-allowed; }

/* ---- o encaixe ocupado --------------------------------------------------- */
.jg-ficha { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-2) var(--sp-2) var(--sp-3); }
.jg-ficha-ico { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 6px; }
.jg-ficha b { display: block; font-family: var(--font-titulo); font-size: 1.05rem; }
.jg-ficha span { display: block; font-size: .8rem; opacity: .85; }
.jg-ficha-vida { font-variant-numeric: tabular-nums; opacity: .65 !important; margin-top: 2px; }
.jg-nivel {
  font-style: normal; font-size: .72rem; padding: 1px 6px; border-radius: var(--raio-pill);
  background: var(--realce); color: var(--petroleo-900);
}
.jg-acoes-bloco { display: flex; flex-direction: column; gap: 6px; }
.jg-acao {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px var(--sp-3);
  min-height: 52px; padding: var(--sp-2) var(--sp-3); cursor: pointer; text-align: left;
  background: rgba(255,255,255,.09); border: 0; border-radius: var(--raio-sm); color: var(--branco);
  font-family: var(--font-texto);
}
.jg-acao:hover:not([disabled]) { background: rgba(255,255,255,.16); }
.jg-acao b { font-family: var(--font-titulo); font-size: .95rem; }
.jg-acao span { grid-column: 1; font-size: .75rem; opacity: .7; }
.jg-acao i {
  grid-row: 1 / 3; grid-column: 2; font-style: normal; font-weight: 700;
  font-family: var(--font-titulo); color: var(--realce); font-variant-numeric: tabular-nums;
}
.jg-acao[disabled] { opacity: .4; cursor: not-allowed; }
.jg-acao-vender i { color: var(--turquesa-300); }

/* ---- pausa --------------------------------------------------------------- */
.jg-pausa-acoes { display: flex; flex-direction: column; gap: var(--sp-3); align-items: center; }
.jg-pausa-acoes .btn { min-width: 200px; }

/* ---- o pé legal ---------------------------------------------------------- */
.jg .lk-pe { padding: 0 var(--sp-4) var(--sp-2); margin: 0; gap: 2px; }
.jg .lk-pe .footer-legal { font-size: .58rem; opacity: .55; }

/* ---- telas largas: o jogo não estica, ele centraliza ---------------------- */
@media (min-width: 720px) {
  .jg-campo { width: min(560px, 100%); margin: 0 auto; }
  .jg-hud { justify-content: center; padding-right: var(--sp-4); }
}

/* ---- quem pediu menos movimento ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .jg-aviso { transition: none; }
}