/* 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"],
html:has(body[data-page="daydrilho"]), body[data-page="daydrilho"] {
  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;   /* sobe para 56 quando o painel entra, ver .jg-hud abaixo */
}
.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; }
/* `touch-action: none`, E NÃO `manipulation` — MEDIDO EM 13/09/2026 -----------
   O mutirão (docs/73) não funcionava no celular, e nenhum portão pegava: com
   `manipulation`, o Chrome manda `pointerdown`, UM `pointermove` e então
   `pointercancel` — ele decide que o gesto é dele (pan/zoom) e mata o fluxo.
   A lâmina nunca chegava a nascer, e o arrasto que recolhe fichas (docs/72 §5)
   também nunca funcionou em toque: herdaram o mesmo defeito.

   POR QUE OS TESTES PASSAVAM: `PointerEvent` sintético não passa pelo
   `touch-action` — só o toque de verdade (`Input.dispatchTouchEvent`) passa. O
   portão só começou a cobrar isso depois deste dia.

   Esta página é um JOGO em tela cheia: não há o que rolar por baixo do campo, e
   `none` é o que devolve o gesto para quem desenhou o gesto. */
.jg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* 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; }
/* ---- OS DOIS MODOS NO MENU (docs/80 §5.7) --------------------------------
   Dois botões do mesmo peso, lado a lado quando cabem: o dono pediu os dois modos
   no menu, e um deles menor diria qual é o "de verdade". Nome e uma linha do que é,
   dentro do botão, para a escolha não depender de abrir a ajuda. */
.jg-modos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.jg-modo {
  flex-direction: column; gap: 2px; min-height: 64px; padding: .75em .9em;
  white-space: normal; text-align: center;
}
.jg-modo-nome {
  font-family: var(--font-titulo); font-size: 1.15rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; line-height: 1.1;
}
.jg-modo-desc {
  font-family: var(--font-texto); font-size: .78rem; font-weight: 600;
  line-height: 1.3; letter-spacing: 0; text-transform: none;
}
@media (max-width: 359px) { .jg-modos { grid-template-columns: 1fr; } }
/* As abas do placar: são duas tabelas, e pontos de um modo não se comparam com os
   do outro. `aria-pressed` diz qual está aberta; o estilo sai dele, e não de classe. */
.jg-abas {
  display: inline-flex; gap: 2px; margin: 0 auto var(--sp-2); padding: 2px;
  border: 1px solid rgba(255,255,255,.22); border-radius: 999px;
}
.jg-aba {
  min-height: 44px; padding: 0 var(--sp-4); border: 0; border-radius: 999px;
  background: none; color: var(--branco); cursor: pointer;
  font-family: var(--font-texto); font-size: .85rem; font-weight: 600;
}
.jg-aba[aria-pressed="true"] { background: var(--turquesa-300); color: var(--tinta); }
.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); }

/* ---- A BANDEJA DO DESAFIAR (12/09/2026) ---------------------------------
   NO FLUXO, logo abaixo dos botões — e não `position:fixed` como a da bio. A
   bio precisa de posicionamento porque a bolha pode estar em qualquer bloco de
   uma lista rolável; aqui o gatilho é sempre o mesmo botão, no meio de uma tela
   curta. Fluxo não tem conta de posição para errar, não precisa fechar ao rolar
   e não some atrás do teclado das três letras.

   A régua de 44px do docs/16 vale aqui como em todo lugar: são itens de toque
   num celular, e o dedo é o mesmo. */
.jg-bandeja {
  display: flex; flex-direction: column; gap: 6px;
  width: min(320px, 100%); margin: var(--sp-3) auto 0;
  text-align: left;
}
.jg-bandeja-item {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 48px; padding: var(--sp-2) var(--sp-3);
  background: rgba(255,255,255,.09); border: 0; border-radius: var(--raio-sm);
  color: var(--branco); font-family: var(--font-texto); font-size: .95rem;
  text-decoration: none; cursor: pointer; width: 100%;
}
.jg-bandeja-item:hover { background: rgba(255,255,255,.16); color: var(--realce); }
/* O AVISO DA BANDEJA: um compartilhamento que falha calado é um defeito que
   ninguém consegue relatar. Quando a folha do sistema recusa, o motivo aparece
   aqui — e o caminho que sempre funciona está logo acima. */
.jg-bandeja-aviso {
  margin: 2px 0 0; padding: 6px var(--sp-3);
  font-size: .8rem; line-height: 1.3; color: var(--realce);
  background: rgba(0,0,0,.28); border-radius: var(--raio-sm);
}
.jg-bandeja-aviso[hidden] { display: none; }
/* `.ico-traco`, NUNCA `.btn-ico` — o segundo traz `fill:currentColor` e vem
   depois na cascata: o desenho vira mancha sólida (regra 1 do CLAUDE.md). */
.jg-bandeja-item .ico-traco { flex: 0 0 auto; fill: none; stroke: currentColor; }
/* OS LOGOS DAS REDES são preenchidos: a marca é o desenho dela, e em traço o
   WhatsApp e o Facebook viram contorno vazio. Mesma decisão do .lk-ico--cheio
   da bandeja da bio. */
.jg-bandeja-item .jg-ico-marca { flex: 0 0 auto; fill: currentColor; stroke: none; }

.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; }

/* ---- o placar do orçamento (docs/72 D7) ----------------------------------
   As duas metades da mesma partida: o que o dedo salvou e o que a corrupção
   levou. Lado a lado, com a mesma tipografia tabular do placar — a comparação
   é a informação, e comparar pede as duas na mesma linha de base.
   A COR SAI DE TOKEN (regra 2): o salvo em `--turquesa-300`, o perdido em
   branco a 55%. E é 55% e não vermelho de propósito — perda apagada lê como
   perda; perda em vermelho brigaria com o `--realce`, que neste jogo significa
   "olhe aqui". */
.jg-orcamento-placar {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2) var(--sp-5);
  margin: 0 0 var(--sp-4); font-size: .82rem; font-variant-numeric: tabular-nums;
}
.jg-orcamento-placar span { display: flex; align-items: baseline; gap: 6px; opacity: .9; }
.jg-orcamento-placar b {
  font-family: var(--font-titulo); font-size: 1.5rem; line-height: 1; color: var(--turquesa-300);
}
.jg-orcamento-placar .e-perdido { opacity: .6; }
.jg-orcamento-placar .e-perdido b { color: var(--branco); }

/* O texto da tela de ajuda: mesmo corpo do `jg-lead`, mas dentro da lista de
   seções, onde o espaçamento vem do `jg-sub` acima dele. */
.jg-ajuda-txt { margin: 0 0 var(--sp-3); font-size: .9rem; line-height: 1.5; opacity: .88; }
.jg-ajuda-txt b { color: var(--turquesa-300); 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; }
/* A LISTA DOS INIMIGOS USA A MESMA CAIXA DAS TORRES desde 12/09/2026: são três,
   com arte e com traços que chegam por onda, e não mais nove etiquetas de uma
   palavra. A `.jg-tag` saiu junto com a cor de inimigo — ela pintava
   `background: var(--token)`, e o token deixou de existir com os sprites. */
.jg-ajuda-tags { list-style: none; margin: 0 0 var(--sp-4); padding: 0; }
.jg-ajuda-tags li {
  display: flex; gap: var(--sp-3); align-items: center;
  padding: var(--sp-3) 0; border-bottom: 1px solid rgba(255,255,255,.1);
}
.jg-ajuda-tags b { display: block; font-family: var(--font-titulo); font-size: 1.05rem; }
.jg-ajuda-tags span { display: block; font-size: .85rem; opacity: .85; }
.jg-ajuda-tags em { display: block; margin-top: 4px; font-size: .8rem; color: var(--turquesa-300); font-style: italic; }
/* A ARTE DEITADA: os três selos são largos (proporção 2,0 a 2,6), então quem
   manda é a LARGURA. `height:auto` para nenhum deles ser esmagado. */
.jg-ajuda-arte { width: 88px; height: auto; flex: 0 0 auto; }
.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 `.jg-op-frase` SAIU DA LISTA em 13/09/2026 (docs/75 §4). Ela era o motivo
   de o popup existir e, justamente por isso, não podia ser três linhas de
   itálico pequeno repetidas sete vezes: a lista tomava a tela e a frase era
   lida de raspão. Ela agora tem palco próprio — `.jg-frase-palco`, no meio do
   campo, quando a pauta é escolhida. */

/* 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 QUE SOME DURANTE A PARTIDA (docs/75) -----------------------------
   A `/jogo` a 390x800 dava 9 fileiras de campo, e 103px iam para duas faixas
   que não jogam: o rodapé legal (77px) e a dica (26px). Como a célula sai da
   LARGURA, cada pixel devolvido embaixo vira FILEIRA — e 103px são duas.

   A LINHA DE PROPAGANDA ELEITORAL NÃO SAI DO DOCUMENTO. Ela é exigência legal
   (identifica quem paga a propaganda, com CNPJ) e continua em todas as telas de
   LEITURA da página: menu, ajuda e fim. O que ela não faz mais é disputar
   espaço com o campo enquanto a pessoa está jogando. */
html.e-jogando .lk-pe { display: none; }
/* E O DESLIZADOR DE VOLUME é do menu, não do jogo (docs/75 §8): no meio de uma
   onda a única decisão de som que se toma é ligar ou desligar. A chave de mudo
   fica; o deslizador volta quando a partida sai da frente. */
html.e-jogando .jg-volume { display: none; }

/* A DICA FLUTUA sobre o pé do campo: devolve 26px de altura sem sair do DOM —
   ela é `aria-live`, e quem depende dela não tem outro caminho (docs/75 §5). */
.jg-dica {
  /* NO ALTO, logo abaixo do painel (13/09/2026): instrução se lê ANTES de agir,
     e embaixo ela disputava o olho com a parede — que é justamente onde a ação
     acontece. O `top` desvia do aviso "ONDA N", que mora a 6px.
     O lugar que ela deixou passou a ser da faixa `.jg-status`. */
  position: absolute; left: var(--sp-2); right: var(--sp-2); top: 38px;
  z-index: 5; margin: 0; padding: 5px var(--sp-3);
  background: color-mix(in srgb, var(--petroleo-900) 88%, transparent);
  border-radius: var(--raio-pill);
  text-align: center; font-size: .82rem; line-height: 1.25;
  pointer-events: none;
}
.jg-dica[hidden] { display: none; }
/* SEM TEXTO, SEM FAIXA. A dica agora se apaga sozinha depois de 5s, e o
   elemento vazio continuava desenhando a pílula no meio da tela — uma linha
   escura pairando sobre o campo sem dizer nada. */
.jg-dica:empty { display: none; }

/* ---- A FAIXA DO QUE SE ADMINISTRA (13/09/2026) --------------------------
   Corações, orçamento e onda desceram do painel para cá: eles são o que a pessoa
   ADMINISTRA, e administrar acontece embaixo, onde estão os cobogós e onde o
   dedo já está. O painel de cima ficou com o que só se lê de relance — pontos,
   pausa e som.

   E ela FLUTUA, como a dica: uma faixa no fluxo custaria altura, e altura aqui
   vira fileira de campo (docs/75 §1). Zero pixel de layout. */
.jg-status {
  /* ABAIXO DOS SLOTS, no fluxo — e não flutuando sobre eles. Sobreposta à
     parede ela competia com os cobogós justamente onde o dedo trabalha.
     26px é o teto: o campo tem 744px e 11 fileiras pedem 715 (docs/75 §1). */
  /* 28px CRAVADOS, e não `min-height`: com padding e a altura de linha dos
     números ela nasceu com 35 e comeu uma fileira do campo (medido). O teto é
     29 — 744 de campo menos os 715 que 11 fileiras pedem. */
  flex: 0 0 auto; height: 28px; overflow: hidden;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-3);
  background: var(--petroleo-900);
}
.jg-status[hidden] { display: none; }
.jg-status .jg-vidas { margin-right: auto; }
.jg-status .jg-num { margin: 0; display: flex; align-items: baseline; gap: 5px; }
.jg-status .jg-num b { font-size: .88rem; line-height: 1; }
.jg-status .jg-num span { font-size: .58rem; opacity: .7; text-transform: uppercase; letter-spacing: .05em; }
.jg-status .jg-vida { width: 15px; height: 15px; }
/* O ORÇAMENTO PISCA QUANDO MUDA: é o que liga a ficha recolhida à conta. */
.jg-num-orc b { color: var(--realce); }
/* E O MESMO PISCA SERVE AO NÍVEL DO DAYDRILHO (docs/81 §10): é a mesma ideia
   (o número que mudou tem de ser visto), e a animação já estava escrita. */
.jg-num-orc.e-mudou b, .jg-num.e-mudou b { animation: jg-orc-pisca .4s ease-out; }
@keyframes jg-orc-pisca {
  from { color: var(--branco); transform: scale(1.22) }
  to { color: var(--realce); transform: none }
}
@media (prefers-reduced-motion: reduce) { .jg-num-orc.e-mudou b, .jg-num.e-mudou b { animation: none } }

/* O PALCO DA FRASE (docs/75 §4): sozinha, grande. Ela não recebe toque — o
   campo continua respondendo por baixo dela. */
.jg-frase-palco {
  /* NO ALTO, e não no meio (docs/76 §5): o meio do campo é POR ONDE OS INIMIGOS
     DESCEM, e a frase entrava bem na hora em que a pessoa quer olhar o
     tabuleiro. O céu está sempre vazio — o campo tem 11 fileiras e a parede
     ocupa no máximo 4. O `top` desvia do aviso "ONDA N", que mora a 6px. */
  position: absolute; left: var(--sp-3); right: var(--sp-3); top: 76px;
  z-index: 4; margin: 0; padding: var(--sp-3) var(--sp-4);
  background: color-mix(in srgb, var(--petroleo-900) 78%, transparent);
  border-left: 3px solid var(--realce); border-radius: var(--raio-sm);
  color: var(--turquesa-300); font-style: italic;
  font-size: clamp(.95rem, 4.2vw, 1.15rem); line-height: 1.4;
  pointer-events: none;
  animation: jg-frase-entra .22s ease-out;
}
.jg-frase-palco[hidden] { display: none; }
@keyframes jg-frase-entra { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .jg-frase-palco { animation: none } }

/* ---- A SUGESTÃO (docs/74 §4.2) ------------------------------------------
   UMA compra, concreta, com o motivo escrito. O motivo não é enfeite: sugestão
   sem porquê é palpite, e palpite de jogo se ignora na segunda vez. */
.jg-sugestao { padding: var(--sp-3) var(--sp-4) var(--sp-2); }
.jg-sugestao-porque {
  margin: 0 0 var(--sp-3); font-size: .9rem; color: var(--turquesa-300);
}
.jg-sugestao-ficha { display: flex; gap: var(--sp-3); align-items: flex-start; }
.jg-sugestao-ico { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 6px; }
.jg-sugestao-txt b {
  display: flex; align-items: baseline; gap: var(--sp-2);
  font-family: var(--font-titulo); font-size: 1.05rem;
}
.jg-sugestao-txt b i {
  font-style: normal; color: var(--realce); font-variant-numeric: tabular-nums;
}
.jg-sugestao-txt span { display: block; font-size: .82rem; opacity: .85; }
.jg-sugestao-txt em {
  display: block; margin-top: 4px; font-size: .8rem; line-height: 1.3;
  color: var(--turquesa-300); font-style: italic;
}
.jg-sugestao-acoes { display: flex; flex-direction: column; gap: 8px; padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.jg-sugestao-acoes .btn { width: 100%; min-height: 48px; }

/* ---- A COMPRA EM DOIS TEMPOS (docs/74 §3) -------------------------------
   A pauta escolhida fica marcada e o botão de pagar mora no PÉ da folha — a
   distância entre os dois é metade do conserto do clique fantasma: o toque que
   escolhe e o que paga acontecem em lugares diferentes da tela. */
.jg-op.e-escolhida {
  background: rgba(255,255,255,.12);
  box-shadow: inset 3px 0 0 var(--realce);
}
.jg-confirmar {
  position: sticky; bottom: 0; z-index: 2;
  padding: var(--sp-3) var(--sp-3) var(--sp-4);
  background: linear-gradient(to top, var(--petroleo-900) 72%, transparent);
}
.jg-confirmar-bt {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  min-height: 52px;
}
.jg-confirmar-bt i {
  font-style: normal; font-weight: 700; font-family: var(--font-titulo);
  font-variant-numeric: tabular-nums;
}
.jg-confirmar-dica {
  margin: 0; padding: var(--sp-2) var(--sp-4) var(--sp-4);
  font-size: .8rem; opacity: .65; text-align: center;
}
/* A RECUSA (docs/80 §5.7) não pode ter a cara de uma dica: é o motivo de o botão estar
   apagado, e sem ele o toque "não faz nada". Inteira, e na cor do realce. */
.jg-confirmar-dica.e-recusa { opacity: 1; color: var(--realce); font-weight: 600; }
/* e o botão apagado de verdade: o `.btn[disabled]` do site só troca o cursor, e um
   Construir amarelo inteiro que não constrói é o "toque que não faz nada" */
.jg-sugestao-acoes .btn[disabled] { opacity: .4; transform: none; box-shadow: none; }
/* O Vender armado muda de COR e de texto: é a única ação destrutiva do jogo, e
   ela tem de parecer outra coisa depois do primeiro toque. */
.jg-acao.e-armado {
  background: color-mix(in srgb, var(--realce) 22%, transparent);
  box-shadow: inset 0 0 0 2px var(--realce);
}

/* ---- 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); }

/* ---- a moldura do kit (docs/71 Fase E) ----------------------------------
   O kit fala neon e meme; o site fala Oswald, turquesa e âmbar. Os dois não se
   fundem — SE DIVIDEM POR REGIÃO, e a divisão está no docs/71 §5:
   o CAMPO veste os tokens publicados (é onde moram os cobogós, que são a marca)
   e a MOLDURA veste o kit (menu, fim, cartão — onde a peça circula). */

/* As duas cores novas do kit viram TOKEN, e com prefixo próprio: elas são de
   uma página, não da marca, então não entram na rampa do :root do site. */
:root {
  --jg-ciano: #18F0F0;
  --jg-magenta: #F018F0;
  --jg-veu-fim: color-mix(in srgb, var(--fundo-3) 88%, transparent);
}

.jg-logo {
  width: min(280px, 72%); aspect-ratio: 1;
  margin: 0 auto var(--sp-2);
  background: center/contain no-repeat;
}
/* Com o logo carregado o <h1> sai da vista mas FICA na árvore: a arte já traz o
   título, e repeti-lo em texto seria dizer a mesma coisa duas vezes para quem
   enxerga. Quem usa leitor de tela continua ouvindo. */
.jg-logo:not([hidden]) ~ .jg-titulo,
.jg-logo:not([hidden]) ~ .jg-selo {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.jg-retrato { width: 160px; aspect-ratio: 1; margin: 0 auto; background: center/contain no-repeat; }
/* À ESQUERDA, alinhada com o título: esta tela é a única de texto corrido do
   jogo (`.jg-tela-rolavel`), e um retrato centralizado sobre texto alinhado à
   esquerda fica solto no meio do nada. */
.jg-retrato-bom { width: 120px; margin: 0 0 var(--sp-1); }

/* ---- O FUNDO DA TELA DE FIM (docs/71 Fase E) ----------------------------
   A arte do kit entra ATRÁS DO MESMO VÉU que a tela já tinha. O véu não é
   enfeite: a `.jg-tela` já pintava 92% de `--fundo-3` sobre o campo justamente
   para o texto se ler, e a foto do kit é uma rua com luz — sem o véu, a linha
   do placar e a das três letras passariam a depender de qual pedaço da foto
   calhou de ficar atrás delas.
   88% e não 92%: é o ponto em que a textura aparece e o texto continua acima de
   4,5:1 — medido no pixel, e cobrado por portão. */
#jgFim.e-bg {
  background-image: linear-gradient(var(--jg-veu-fim), var(--jg-veu-fim)), var(--jg-bg-fim);
  background-size: cover, cover;
  background-position: center, center;
}

/* ---- O PAINEL DE PAPEL RASGADO, EM DOIS PEDAÇOS -------------------------
   O CORPO é o fundo do HUD; a BORDA pendura logo abaixo dele, sobre o céu do
   campo. São dois arquivos, e não um, porque medido: a borda vale ~45% da
   altura da arte, o HUD tem 56px em qualquer tela, e servindo a tira inteira a
   borda caía NO MEIO da faixa — as etiquetas de 8px ("orçamento", "onda",
   "pontos") ficavam brancas sobre o branco do papel. Não há `background-size`
   que conserte isso para todas as larguras, porque a proporção da arte é fixa e
   a altura do HUD não.

   E o defeito só apareceu na CAPTURA: lendo o CSS, a linha parece certa. É a
   mesma família da regra 1 do CLAUDE.md. */
.jg-hud { background: var(--fundo-3) center bottom / cover no-repeat; min-height: 56px; }
/* ---- A PONTUAÇÃO NO CENTRO, E GRANDE (13/09/2026) -----------------------
   O painel ficou com uma coisa só (docs deste dia: corações, orçamento e onda
   desceram), e uma coisa só no meio de uma faixa larga tem de estar NO MEIO.
   A pausa vira absoluta à esquerda — o que era proibido quando o painel
   carregava cinco itens e eles se atropelavam (docs/70 §8.2), e é seguro agora
   que sobrou um: não há com o que colidir. */
.jg-hud { position: relative; justify-content: center; }
/* A FOLGA DOS DOIS LADOS TEM DE SER IGUAL, senão "centralizado" mente: o painel
   reserva 140px à direita (era onde moravam o mudo E o deslizador) e nada à
   esquerda — medido, a pontuação caía 66px fora do centro. Em partida o
   deslizador não existe, então sobra só o botão de mudo: 56px de cada lado, com
   a pausa e o som ocupando as duas margens. */
html.e-jogando .jg-hud { padding-left: 56px; padding-right: 56px; }
.jg-hud .jg-pausa-bt { position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%); }
.jg-hud .jg-num { align-items: center; text-align: center; }
.jg-hud .jg-num b { font-size: 1.9rem; line-height: .95; }
.jg-hud .jg-num span { font-size: .6rem; letter-spacing: .14em; opacity: .75; }
.jg-hud.e-painel {
  position: relative; z-index: 1;          /* o campo vem depois no fluxo e
                                              pintaria por cima da borda */
  background-image: var(--jg-painel);
  background-position: center;
}
.jg-hud.e-painel::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 16px;
  /* ESTICADA (`100% 100%`) e não `cover`: é a única forma que dá a MESMA borda
     de 16px a 360px e a 1440px. Esticar uma linha rasgada na horizontal não se
     percebe — ela já é irregular; deixá-la crescer com a largura, sim: a 1440px
     a borda teria 59px e comeria o topo do campo. */
  background: var(--jg-painel-borda) 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}

/* ---- 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; }
}