/* Tecnocafé · modo guiado: um número por vez, legível a 3 m. */

.guia {
  position: relative;
  width: 100%; max-width: 480px; margin: 0 auto;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  padding: 0 var(--gutter);
}

.g-topo {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px auto; align-items: center; gap: 4px; min-height: 56px; margin: 0 -8px;
  /* Fixo no alto: Sair e Deu errado? ficam à mão mesmo com a página rolada. */
  position: sticky; top: 0; z-index: 6;
}
.g-topo::before { content: ""; position: absolute; inset: 0 -8px; background: var(--paper); z-index: -1; }
.g-centro {
  display: grid; justify-items: center; gap: 0; min-height: 48px; padding: 2px 4px;
  background: transparent; border: 0; color: var(--ink); min-width: 0;
}
.g-nome { font-weight: 600; font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.g-passo { font-size: .9375rem; letter-spacing: .1em; color: var(--ink-soft); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.g-socorro {
  min-height: 48px; padding: 0 14px; border-radius: 999px;
  background: transparent; border: 2px solid var(--acao); color: var(--acao);
  font-weight: 700; font-size: .9375rem; white-space: nowrap;
}
.g-socorro-i { display: none; }
.g-btn-voz:disabled { opacity: .45; }

.g-fase { display: flex; align-items: center; gap: 10px; min-height: 32px; }
.g-ramo { width: 26px; height: 29px; flex: none; }
.g-fase-rot { flex: 1; font-size: .875rem; color: var(--ink-soft); }
.g-ensaio { color: var(--acao); font-size: .8125rem; }
.g-cerejas i { width: 18px; height: 18px; }

.g-fita { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; min-height: 40px; }
.fita-rot { font-size: .9375rem; letter-spacing: .06em; color: var(--ink-soft); min-width: 32px; }
.fita-btn { min-height: 48px; min-width: 48px; padding: 0 4px; margin: -4px -4px -4px 0; border: 0; background: transparent; font-family: var(--f-stamp); font-weight: 800; text-decoration: underline dotted; text-underline-offset: 4px; }
.fita-meio { position: relative; height: 24px; display: flex; align-items: center; }
.fita-trilho { position: relative; width: 100%; height: 8px; border-radius: 4px; background: var(--trilho); overflow: hidden; }
.fita-lima { position: absolute; inset: 0; background: var(--lime); transform-origin: 0 50%; transform: scaleX(0); transition: transform .25s linear; }
.fita-marcas { position: absolute; inset: 0; pointer-events: none; }
.fita-marca {
  position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--ink-soft);
}
.fita-marca.feito { background: var(--leaf); border-color: var(--leaf); }
.fita-marca.agora { width: 16px; height: 16px; margin: -8px 0 0 -8px; background: var(--cherry); border: 3px solid var(--card); box-shadow: 0 0 0 2px var(--cherry); }

.g-palco { flex: 1; display: flex; flex-direction: column; }
.g-cena, .g-mesa, .g-portal { flex: 1; display: flex; flex-direction: column; animation: surge .12s ease-out both; }

.g-heroi { display: grid; justify-items: center; align-content: center; text-align: center; gap: 4px; padding: 8px 0 4px; min-height: 28vh; }
.h-heroi { display: grid; justify-items: center; gap: 2px; width: 100%; }
.h-numero {
  display: flex; align-items: baseline; justify-content: center; gap: .08em;
  font-size: 160px; line-height: .86; letter-spacing: .01em; color: var(--ink);
  white-space: nowrap; max-width: 100%; min-width: 0;
}
.h-numero.quebra { white-space: normal; flex-wrap: wrap; line-height: .95; }
.h-unidade { font-size: .35em; letter-spacing: .06em; }
.h-rotulo { font-size: 1rem; color: var(--ink); max-width: 30ch; overflow-wrap: anywhere; }
.h-rotulo:empty { display: none; }
.h-apoio { font-size: 1.5rem; letter-spacing: .05em; color: var(--ink-soft); line-height: 1.1; }
.g-relogio { color: var(--ink); }
.h-apoio:has(.h-apoio-rel) { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 .7em; }
.h-apoio-item { white-space: nowrap; }
.h-apoio-rel { font-size: 1.0625rem; white-space: nowrap; color: var(--ink-soft); }
.g-cena.compacto .g-heroi { min-height: 0; }
.g-cena.apertado .h-perto { display: none; }
.g-cena.apertado .g-titulo { font-size: 1.375rem; }
.g-cena.apertado .g-acao { font-size: 1.125rem; line-height: 1.35; }
.g-cena.apertado .g-guia { margin-top: 2px; }
.h-casa { font-size: 1.0625rem; color: var(--ink); max-width: 34ch; }
.h-nota { font-size: .875rem; color: var(--ink-soft); }
.h-perto { font-size: 1.0625rem; color: var(--ink); margin-top: 4px; font-variant-numeric: tabular-nums; }
.g-guia { width: 100%; max-width: 360px; display: grid; gap: 4px; margin-top: 6px; }
.g-balanca-guia { height: 10px; border-radius: 5px; }

.g-heroi-anel .anel-caixa { position: relative; width: min(220px, 58vw, 26vh); aspect-ratio: 1; display: grid; place-items: center; }
.g-heroi-anel .anel { position: absolute; inset: 0; width: 100%; height: 100%; }
.g-heroi-anel .h-heroi { position: relative; }
.g-heroi-anel .h-numero { font-size: 64px; }
.g-heroi-anel .h-rotulo { font-size: .8125rem; max-width: 12ch; line-height: 1.15; }
.g-anel-mini { width: 72px; height: 72px; flex: none; }
.acao-linha { display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%; }
.g-embolo { position: relative; width: 14px; height: 120px; border-radius: 7px; background: var(--trilho); overflow: hidden; flex: none; }
.g-embolo-linha { position: absolute; left: 0; right: 0; top: 0; height: 100%; background: var(--lime); transform-origin: 50% 0; transform: scaleY(calc(var(--desce, 0))); transition: transform .25s linear; }
.g-pulso { width: 22px; height: 22px; border-radius: 50%; background: var(--rule); flex: none; transition: background .1s, transform .1s; }
.g-pulso.bate { background: var(--cherry); transform: scale(1.15); }
.gotas-pulso { background: var(--cherry); animation: pulso var(--ritmo, 1s) ease-in-out infinite; }

.g-instrucao { display: grid; gap: 8px; justify-items: start; padding: 8px 0 6px; min-width: 0; overflow-wrap: anywhere; }
.g-titulo { font-family: var(--f-display); font-stretch: 112%; font-weight: 800; font-size: 1.625rem; line-height: 1.08; }
.g-acao { font-size: 1.25rem; line-height: 1.4; }
.chip-porque { min-height: 40px; }
.g-porque { font-size: 1.0625rem; color: var(--ink); border-left: 3px solid var(--leaf); padding-left: 10px; }
.g-depois { font-size: 1rem; color: var(--ink-soft); border-top: 2px dashed var(--rule); padding-top: 8px; margin-top: 6px; }
.g-cliques { font-weight: 700; }
.g-ajuda { display: grid; gap: 6px; }
.chip-mini { min-height: 40px; font-size: .875rem; padding: 0 12px; margin-block: 4px; }
.chip-atraso { background: var(--card); border: 2px solid var(--leaf); color: var(--ink); white-space: normal; text-align: left; min-height: 48px; }
.g-enquanto { border: 2px dashed var(--rule); border-radius: 12px; padding: 10px 12px; display: grid; gap: 4px; margin: 6px 0; font-size: 1rem; }
.g-timer-local, .g-eu { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; width: 100%; max-width: 380px; margin: 8px auto 0; }
.g-timer-btn { min-height: 64px; min-width: 150px; }

.g-zona {
  margin-top: auto; display: grid; gap: 10px;
  padding: 18px 0 calc(16px + env(safe-area-inset-bottom));
  position: sticky; bottom: 0; z-index: 4;
  background: linear-gradient(to bottom, transparent, var(--paper) 22px);
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}
.g-zona.maos { cursor: pointer; padding-top: 28px; }
.g-extras { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.g-extras .btn { min-height: 56px; }
.g-secundarios { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.g-sec {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 64px; border-radius: var(--r-btn); border: 1px solid var(--ink-soft);
  background: var(--card); color: var(--ink); font-weight: 700; font-size: .9375rem;
  touch-action: manipulation;
}
.g-sec:disabled { opacity: .4; cursor: not-allowed; }
.segurar-anel { position: absolute; inset: auto 0 0 0; height: 4px; background: var(--leaf); transform: scaleX(0); transform-origin: 0 50%; }
.g-voltar.segurando .segurar-anel { transform: scaleX(1); transition: transform .6s linear; }
.g-principal {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 100%; min-height: var(--principal-guia); padding: 10px 16px;
  border-radius: var(--r-btn); border: 0;
  background: var(--acao); color: var(--on-accent);
  font-family: var(--f-body); font-weight: 700; font-size: 1.5rem; line-height: 1.15;
  touch-action: manipulation;
}
.g-principal.contorno { background: transparent; color: var(--acao); border: 3px solid var(--acao); }
.g-principal:disabled { opacity: .45; }
.g-dica-zona { text-align: center; font-size: .875rem; color: var(--ink-soft); }
.zona-tiro .g-principal { min-height: 140px; font-size: 2.25rem; letter-spacing: .08em; font-family: var(--f-stamp); font-weight: 800; }

.mesa-lista { display: grid; gap: 8px; margin: 6px 0; }
.mesa-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-card); }
.mesa-item.feito { border-color: var(--leaf); }
.mesa-item.feito .mesa-titulo { color: var(--ink-soft); }
.mesa-marca { flex: none; width: 48px; height: 48px; margin: -6px 0 0 -6px; display: grid; place-items: center; border: 0; background: transparent; }
.mesa-caixa { width: 30px; height: 30px; border-radius: 8px; border: 2px solid var(--ink-soft); display: grid; place-items: center; color: transparent; }
.mesa-caixa .ico-ui { width: 20px; height: 20px; stroke-width: 3; }
.mesa-meio { flex: 1; min-width: 0; display: grid; gap: 6px; }
.mesa-linha { display: flex; align-items: center; gap: 8px; }
.mesa-ico { width: 24px; height: 24px; color: var(--ink-soft); flex: none; }
.mesa-titulo { font-weight: 700; flex: 1; }
.mesa-dado { font-size: 1.25rem; letter-spacing: .04em; white-space: nowrap; }
.mesa-instr { color: var(--ink-soft); font-size: .9375rem; }
.mesa-cliques { font-weight: 700; font-size: .9375rem; }
.mesa-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mesa-ajuda-txt { font-size: .9375rem; border-left: 3px solid var(--leaf); padding-left: 8px; }
.regua-mini .regua-segs { padding-top: 8px; }

.portal-saca { margin: 8px calc(-1 * var(--gutter)) 0; padding: 20px var(--gutter) 24px; border-radius: 6px; display: grid; gap: 10px; }
.portal-titulo { font-family: var(--f-display); font-stretch: 118%; font-weight: 800; font-size: 2rem; line-height: 1.02; margin-top: 8px; }
.portal-t0 { font-size: 1.25rem; font-weight: 600; }
.portal-alvo { font-size: 1.125rem; }
.portal-parte { font-size: .9375rem; }
.portal-contagem { display: grid; justify-items: center; gap: 12px; padding: 10px 0 0; }
.portal-cerejas i { width: 28px; height: 28px; }
.portal-numero { font-size: min(240px, 34vh); line-height: .85; color: var(--ink); }
.portal-numero.pulsa { animation: carimbo-cai .25s ease-out both; }
.g-portal.contando .g-extras { visibility: hidden; }

.tiro-fita { position: relative; width: 100%; max-width: 380px; height: 14px; border-radius: 7px; background: var(--trilho); overflow: hidden; margin-top: 10px; }
.tiro-pre { position: absolute; left: 0; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, var(--lime) 0 3px, transparent 3px 7px); opacity: .7; }
.tiro-janela { position: absolute; top: 0; bottom: 0; border-left: 2px solid var(--lime); border-right: 2px solid var(--lime); background: rgba(207, 221, 74, .22); }
.tiro-agora { position: absolute; left: 0; top: 4px; bottom: 4px; width: 100%; background: var(--lime); transform-origin: 0 50%; transform: scaleX(0); border-radius: 3px; }
.g-tiro-pos { display: grid; gap: 14px; justify-items: stretch; padding: 12px 0 18px; }
.tiro-diag { font-size: 1.375rem; font-weight: 700; line-height: 1.25; }
.tiros-lista { display: grid; gap: 4px; }
.tiros-lista li { font-size: 1.125rem; }
.seletor-grande { justify-self: center; height: 72px; grid-template-columns: 72px minmax(120px, auto) 72px; }
.seletor-grande .seletor-valor { font-size: 2.5rem; }

.g-cena.tiro-parado .g-instrucao, .g-cena.tiro-parado .tiro-fita, .g-cena.tiro-parado .h-casa { display: none; }
.g-cena.tiro-parado .g-heroi { min-height: 0; padding: 0; }
.g-cena.tiro-parado .h-numero { font-size: 72px !important; }
.g-cena.tiro-parado .g-tiro-pos { padding-top: 4px; gap: 10px; }

.vapor-ou { font-size: 1.25rem; font-weight: 700; max-width: 26ch; }
.vapor-fases { display: grid; gap: 8px; list-style: none; }
.vapor-fases li { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--rule); background: var(--card); font-size: 1.0625rem; }
.vapor-fases li.agora { border: 2px solid var(--cherry); }

.g-gota { min-height: 72px; min-width: 160px; font-size: 1.375rem; }

.g-longa .g-heroi { gap: 8px; }
.g-ramo-grande { width: 72px; height: 81px; flex: none; }
.longa-pronto { font-size: 1.125rem; transform: rotate(-4deg); }
.longa-falta { font-size: 1.5rem; letter-spacing: .04em; }
.longa-dia { position: relative; width: 100%; max-width: 380px; }
.longa-fita { height: 10px; }
.longa-marcos { position: absolute; inset: 0; }
.longa-marco { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--cherry); border: 2px solid var(--card); }
.longa-tarefas { display: grid; gap: 4px; }
.longa-honesto { color: var(--ink-soft); font-size: .9375rem; border-left: 3px solid var(--leaf); padding-left: 10px; }

.g-revisao { position: fixed; inset: 0; z-index: 50; background: var(--veu); display: grid; place-items: end center; padding: 16px; }
.revisao-cartao { width: 100%; max-width: 480px; background: var(--card); border-radius: 16px; padding: 18px; display: grid; gap: 10px; box-shadow: var(--sombra); }
.revisao-dado { font-size: 3rem; line-height: 1; }
.g-pausado { position: absolute; left: 0; right: 0; top: 34%; display: grid; place-items: center; pointer-events: none; z-index: 5; }
.g-pausado .carimbo-selo { font-size: 2.5rem; background: var(--paper); color: var(--acao); transform: rotate(-8deg); }
.guia.pausado .g-heroi { opacity: .35; }

.g-medidor { position: absolute; visibility: hidden; left: -9999px; top: 0; white-space: nowrap; font-size: 100px; line-height: 1; }

.socorro { display: grid; gap: 14px; }
.socorro-opcoes { display: grid; gap: 8px; }
.socorro-opcao { width: 100%; min-height: 56px; text-align: left; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--ink-soft); background: var(--paper); color: var(--ink); font-weight: 600; font-size: 1.0625rem; }
.socorro-sub { font-size: .875rem; color: var(--ink-soft); margin-top: 6px; }
.socorro-ferramentas { display: grid; gap: 8px; border-top: 2px dashed var(--rule); padding-top: 14px; }
.socorro-resposta { display: grid; gap: 12px; }
.socorro-pergunta { font-weight: 700; font-size: 1.125rem; }
.socorro-bloco { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--ink); background: var(--paper); font-size: 1.125rem; }
.socorro-bloco.folha-cor { border-color: var(--leaf); }
.carimbo-rot { font-size: 1.125rem; letter-spacing: .12em; }
.entrada-grande { font-size: 2rem; min-height: 64px; }

/* Telas baixas: os três botões vão para o menu Mais do topo */
.g-mais { display: none; }
@media (max-height: 679px) {
  .g-topo { grid-template-columns: 48px minmax(0, 1fr) 48px 48px auto; }
  .g-mais { display: inline-grid; }
  .g-secundarios { display: none; }
  .g-heroi { min-height: 22vh; padding-top: 4px; }
  .g-titulo { font-size: 1.375rem; }
  .g-acao { font-size: 1.125rem; }
  .g-zona { gap: 8px; }
  .g-zona.maos { padding-top: 16px; }
}

/* Até 779 px de altura: a dica de toque sai e a zona fica mais justa. */
@media (max-height: 779px) {
  .g-dica-zona { display: none; }
  .g-zona { padding-top: 12px; }
}

/* Paisagem e tablet: herói à esquerda, instrução e botões à direita */
@media (orientation: landscape) and (min-width: 560px) and (max-height: 700px) {
  .guia { max-width: 1100px; }
  .g-cena { display: grid; grid-template-columns: 55% 1fr; grid-template-rows: auto auto 1fr; column-gap: 24px; }
  .g-cena > .g-heroi { grid-column: 1; grid-row: 1 / span 3; min-height: 0; }
  .g-cena > :not(.g-heroi) { grid-column: 2; }
  .g-cena > .g-zona { grid-row: 3; align-self: end; }
}

/* Desktop: coluna central de 480 px e atalhos de teclado visíveis */
.so-teclado { display: none; }
@media (pointer: fine) and (min-width: 900px) {
  .so-toque { display: none; }
  .so-teclado { display: inline; }
}

/* Telas muito baixas (celular deitado, zoom alto): a zona de ação deixa de flutuar. */
@media (max-height: 420px), (max-width: 340px) and (max-height: 560px) {
  .g-zona { position: static; background: none; }
  .g-heroi { min-height: 0; }
  .g-topo { position: static; }
}

/* Telas estreitas: Deu errado? vira um botão de 48 px com "?". */
@media (max-width: 380px) {
  .g-topo { grid-template-columns: 48px minmax(0, 1fr) 48px 48px; }
  .g-socorro { min-width: 48px; width: 48px; padding: 0; display: inline-grid; place-items: center; }
  .g-socorro-rot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .g-socorro-i { display: inline; font-family: var(--f-stamp); font-weight: 800; font-size: 1.5rem; line-height: 1; }
  .g-passo { letter-spacing: .04em; font-size: .8125rem; }
  /* O nome do método pode ir a duas linhas; o contador de passos segue em uma. */
  .g-nome { white-space: normal; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-align: center; overflow-wrap: anywhere; }
}
@media (max-width: 380px) and (max-height: 679px) {
  .g-btn-voz { display: none; }
}

/* Alto contraste forçado */
@media (forced-colors: active) {
  .g-principal, .g-sec, .g-socorro, .chip-atraso, .g-timer-btn { border: 2px solid ButtonText; }
  .g-principal:disabled, .g-sec:disabled { border-color: GrayText; }
  .g-zona, .g-topo::before { background: Canvas; }
  .g-cerejas i, .portal-cerejas i, .cerejas-contagem i { forced-color-adjust: none; }
  .g-cerejas i, .portal-cerejas i { border: 2px solid CanvasText; }
  .fita-marca { border: 2px solid CanvasText; }
  .mesa-marca[aria-pressed="true"] .mesa-caixa { border-color: Highlight; outline: 2px solid Highlight; }
}