/* ============================================================================
   Due Partite — sistema visual

   Público: 60-75 anos, baixa familiaridade digital, acuidade visual e motora
   possivelmente reduzidas. Três consequências que governam tudo abaixo:

   1. Nada abaixo de 56px de alvo de toque. Nada.
   2. Contraste bem acima do mínimo da WCAG — 4.5:1 é piso para quem enxerga
      bem, não para catarata ou degeneração macular.
   3. Zero dependência de cor sozinha. Todo estado tem forma, texto ou ícone.

   A escala inteira responde a --escala, controlada pelo botão de texto maior.
   ========================================================================= */

:root {
  /* Marca herdada do protótipo: teal calmo + dourado. Mantida de propósito —
     funciona para o público e já está nos criativos. */
  --tinta:        #16323a;
  --tinta-suave:  #4a6069;
  --teal:         #154f58;
  --teal-fundo:   #0d3f47;
  --teal-claro:   #e6efed;
  --dourado:      #c98a1f;
  --dourado-fundo:#fdf3df;
  --sucesso:      #1f6a43;
  --sucesso-fundo:#e6f2ea;
  --erro:         #9c3024;
  --erro-fundo:   #fbeeec;
  --papel:        #f4f7f7;
  --carta:        #ffffff;
  --linha:        #d2dfe1;
  --linha-forte:  #a9c0c4;
  --foco:         #8a4d00;

  --escala: 1;
  --raio: 16px;
  --raio-g: 24px;

  /* Sombras com deslocamento e desfoque reais. Halo sem offset é decoração. */
  --sombra-1: 0 1px 2px rgba(21, 79, 88, .06), 0 3px 10px rgba(21, 79, 88, .05);
  --sombra-2: 0 2px 4px rgba(21, 79, 88, .08), 0 10px 28px rgba(21, 79, 88, .09);

  --toque: 60px;

  font-family: 'Segoe UI', -apple-system, system-ui, Arial, sans-serif;
  font-size: 19px;
  color: var(--tinta);
  background: var(--papel);

  /* Superfícies do navegador: sem isto elas chegam com o padrão de ninguém. */
  accent-color: var(--teal);
  caret-color: var(--teal);
  scrollbar-color: var(--linha-forte) var(--papel);
}

::selection { background: var(--teal); color: #fff; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-size: calc(1rem * var(--escala));
  line-height: 1.6;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; }
h1 { font-size: calc(clamp(2rem, 4.5vw, 3rem) * var(--escala)); font-weight: 680; }
h2 { font-size: calc(1.55rem * var(--escala)); font-weight: 670; }
h3 { font-size: calc(1.2rem * var(--escala)); font-weight: 660; }
p  { max-width: 68ch; }

button { font: inherit; border: 0; cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; }

:where(button, a, input, select, [tabindex]):focus-visible {
  outline: 4px solid var(--foco);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- ícones ---------- */
/* Desenhados, traço único de 1.9. O protótipo usava ✓ ♫ ★ ⌂ — glifo de texto
   fazendo papel de interface, que quebra de fonte em fonte e não escala junto. */
.ico {
  width: 1.35em; height: 1.35em; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.ico-g { width: 1.9em; height: 1.9em; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: var(--toque); padding: 14px 26px;
  border-radius: var(--raio); font-weight: 650;
  font-size: calc(1.02rem * var(--escala));
  transition: background .14s ease, border-color .14s ease, transform .08s ease;
}
.btn:active:not(:disabled) { transform: translateY(1px); }

.btn-forte { background: var(--teal); color: #fff; }
.btn-forte:hover:not(:disabled) { background: var(--teal-fundo); }

.btn-suave { background: var(--carta); color: var(--teal); box-shadow: inset 0 0 0 2px var(--linha-forte); }
.btn-suave:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--teal); }

.btn-nu { background: transparent; color: var(--teal); padding: 12px 16px; }
.btn-nu:hover:not(:disabled) { background: var(--teal-claro); }

.btn-largo { width: 100%; }
.btn:disabled { opacity: .5; }

/* ---------- cabeçalho ---------- */
.topo { background: var(--carta); border-bottom: 1px solid var(--linha); }
.topo-int {
  max-width: 1120px; margin: auto; padding: 16px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.marca { display: flex; align-items: center; gap: 13px; color: var(--teal); text-decoration: none; }
.marca-selo {
  width: 52px; height: 52px; border-radius: 15px; flex: none;
  background: var(--teal); color: #fff;
  display: grid; place-items: center;
}
.marca-nome { font-size: calc(1.12rem * var(--escala)); font-weight: 680; line-height: 1.1; letter-spacing: -0.02em; }
.marca-sub { display: block; font-size: calc(.76rem * var(--escala)); font-weight: 400; color: var(--tinta-suave); margin-top: 3px; letter-spacing: 0; }

.acesso { display: flex; gap: 10px; }
.acesso .btn { padding: 12px 18px; }
.acesso .btn[aria-pressed="true"] { background: var(--teal-claro); box-shadow: inset 0 0 0 2px var(--teal); }

main { max-width: 1120px; margin: auto; padding: 32px 28px 64px; }

/* ---------- jogador ---------- */
.jogador {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  background: var(--carta); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 16px 22px; margin-bottom: 28px;
}
.jogador-quem { display: flex; align-items: center; gap: 14px; }
.jogador-ini {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  background: var(--dourado-fundo); color: #6b4a0d;
  display: grid; place-items: center; font-weight: 700;
  font-size: calc(1.05rem * var(--escala));
}
.jogador-nome { display: block; font-weight: 660; font-size: calc(1.05rem * var(--escala)); }
.jogador-dica { display: block; color: var(--tinta-suave); font-size: calc(.86rem * var(--escala)); }

/* ---------- abertura ---------- */
.abertura { margin-bottom: 40px; }
.abertura h1 { margin-bottom: 14px; }
.abertura p { color: var(--tinta-suave); font-size: calc(1.1rem * var(--escala)); }

.garantias { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 24px; }
.garantia { display: flex; align-items: center; gap: 10px; color: var(--tinta-suave); font-size: calc(.92rem * var(--escala)); }
.garantia .ico { color: var(--sucesso); }

/* ---------- lista de jogos ---------- */
/* Lista, não grade de cartões iguais: cada linha mostra o nível alcançado,
   que é a informação que faz a pessoa voltar. */
.secao-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin: 44px 0 20px; }
.secao-titulo p { color: var(--tinta-suave); font-size: calc(.95rem * var(--escala)); margin-top: 6px; }

.jogos { display: grid; gap: 14px; }

.jogo {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px;
  width: 100%; text-align: left;
  background: var(--carta); border: 2px solid var(--linha); border-radius: var(--raio-g);
  padding: 22px 26px; color: var(--tinta);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.jogo:hover { border-color: var(--teal); box-shadow: var(--sombra-2); }

.jogo-selo {
  width: 68px; height: 68px; border-radius: 19px; flex: none;
  display: grid; place-items: center;
  background: var(--teal-claro); color: var(--teal);
}
.jogo-corpo { min-width: 0; }
.jogo-nome { display: block; font-size: calc(1.25rem * var(--escala)); font-weight: 670; letter-spacing: -0.01em; }
.jogo-desc { display: block; color: var(--tinta-suave); font-size: calc(.92rem * var(--escala)); margin-top: 5px; }

.jogo-nivel { display: flex; align-items: center; gap: 14px; flex: none; }
.niveis { display: flex; gap: 6px; }
.nivel-ponto {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--carta); box-shadow: inset 0 0 0 2px var(--linha-forte);
}
.nivel-ponto.feito { background: var(--teal); box-shadow: none; }
.nivel-ponto.travado { background: var(--linha); box-shadow: none; }
.jogo-nivel-txt { font-size: calc(.88rem * var(--escala)); color: var(--tinta-suave); font-weight: 650; white-space: nowrap; }

.jogo[data-travado="true"] { background: #fafbfb; border-style: dashed; }
.jogo[data-travado="true"] .jogo-selo { background: var(--linha); color: var(--tinta-suave); }

.marca-assinatura {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--dourado-fundo); color: #6b4a0d;
  font-size: calc(.78rem * var(--escala)); font-weight: 680;
  padding: 6px 12px; border-radius: 9px;
}

/* ---------- tela de jogo ---------- */
.barra-jogo { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 26px; }

.cabecalho-jogo { margin-bottom: 22px; }
.faixa-nivel {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--teal); color: #fff;
  font-size: calc(.86rem * var(--escala)); font-weight: 680;
  padding: 8px 16px; border-radius: 10px; margin-bottom: 14px;
}
.cabecalho-jogo h1 { font-size: calc(2rem * var(--escala)); margin-bottom: 10px; }
.cabecalho-jogo p { color: var(--tinta-suave); font-size: calc(1.02rem * var(--escala)); }

.andamento { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; font-weight: 650; font-size: calc(.95rem * var(--escala)); }
.sem-pressa { font-weight: 400; color: var(--tinta-suave); font-size: calc(.86rem * var(--escala)); display: flex; align-items: center; gap: 8px; }
.trilho { height: 10px; border-radius: 10px; background: #dfe9e8; overflow: hidden; margin-bottom: 22px; }
.trilho span {
  display: block; height: 100%; width: 100%; background: var(--teal);
  /* scaleX e não width: animar width recalcula layout a cada quadro. */
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}

.aviso {
  display: flex; align-items: center; gap: 12px;
  background: var(--teal-claro); border: 1px solid #c3dbd5; border-radius: var(--raio);
  padding: 16px 20px; margin-bottom: 24px;
  font-size: calc(1rem * var(--escala)); color: #23474f;
}
.aviso[data-tom="bom"] { background: var(--sucesso-fundo); border-color: #b9d8c4; color: var(--sucesso); }
.aviso[data-tom="erro"] { background: var(--erro-fundo); border-color: #e4bdb7; color: var(--erro); }

.tabuleiro {
  background: var(--carta); border: 1px solid var(--linha); border-radius: var(--raio-g);
  padding: 32px; max-width: 860px; margin: 0 auto;
}
.tabuleiro h2 { margin-bottom: 10px; }
.tabuleiro > p { color: var(--tinta-suave); margin-bottom: 22px; }
.acoes { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }

/* peças de jogo */
.grade-objetos { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin: 24px 0; }
.objeto {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 22px 12px; min-height: var(--toque);
  background: var(--papel); border: 2px solid var(--linha); border-radius: 15px;
  font-weight: 650; color: var(--tinta); font-size: calc(.96rem * var(--escala));
}
.objeto .ico { width: 44px; height: 44px; stroke-width: 1.7; color: var(--teal); }
.objeto[aria-pressed="true"] { background: var(--sucesso-fundo); border-color: var(--sucesso); color: var(--sucesso); }

.grade-letras { display: grid; gap: 10px; max-width: 560px; margin: 24px auto; }
.letra {
  aspect-ratio: 1; min-height: 56px; min-width: 0;
  background: var(--papel); border: 2px solid var(--linha); border-radius: 12px;
  font-size: calc(1.5rem * var(--escala)); font-weight: 650; color: var(--tinta);
}
.letra[data-estado="marcada"] { background: var(--dourado-fundo); border-color: var(--dourado); }
.letra[data-estado="achada"] { background: var(--sucesso-fundo); border-color: var(--sucesso); color: var(--sucesso); }

.palavras { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.palavra {
  padding: 10px 16px; border-radius: 11px; font-weight: 660; letter-spacing: .06em;
  background: var(--papel); border: 2px solid var(--linha); font-size: calc(.95rem * var(--escala));
}
.palavra[data-achada="true"] { background: var(--sucesso-fundo); border-color: var(--sucesso); color: var(--sucesso); text-decoration: line-through; }

.pista { background: var(--teal-claro); border-radius: 14px; padding: 22px; font-size: calc(1.08rem * var(--escala)); margin-bottom: 22px; }
.vazios { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 26px 0; }
.vazio {
  min-width: 58px; height: 68px; display: grid; place-items: center;
  border: 2px solid var(--linha); border-radius: 12px; background: var(--papel);
  font-size: calc(1.6rem * var(--escala)); font-weight: 680;
}
.vazio[data-falta="true"] { border-style: dashed; border-color: var(--teal); background: var(--teal-claro); color: var(--teal); }
.opcoes-letra { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.opcao-letra {
  width: 84px; min-height: 84px; border-radius: 15px;
  background: var(--carta); border: 2px solid var(--linha-forte); color: var(--teal);
  font-size: calc(1.6rem * var(--escala)); font-weight: 680;
}
.opcao-letra[data-estado="certa"] { background: var(--sucesso-fundo); border-color: var(--sucesso); color: var(--sucesso); }
.opcao-letra[data-estado="errada"] { background: var(--erro-fundo); border-color: var(--erro); color: var(--erro); }

.grade-caminho { display: grid; gap: 10px; max-width: 520px; margin: 24px auto; }
.casa {
  aspect-ratio: 1; min-height: 56px; min-width: 0;
  border: 2px solid var(--linha); border-radius: 12px; background: var(--papel);
  display: grid; place-items: center; color: var(--tinta-suave);
}
.casa[data-tipo="parede"] { background: #e3e9ea; border-color: var(--linha); color: #8fa3a8; }
.casa[data-tipo="andou"] { background: var(--teal-claro); border-color: #a8cbc4; }
.casa[data-tipo="livre"] { border-color: var(--teal); background: #f1f8f5; }
.casa[data-tipo="voce"] { background: var(--teal); border-color: var(--teal); color: #fff; }
.casa[data-tipo="destino"] { background: var(--dourado-fundo); border-color: var(--dourado); color: #6b4a0d; }

.grade-pecas { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; max-width: 600px; margin: 24px auto; aspect-ratio: 3/2; }
.peca { background-size: 300% 200%; background-repeat: no-repeat; border: 2px solid var(--linha-forte); border-radius: 10px; position: relative; min-width: 0; }
.peca[aria-pressed="true"] { outline: 4px solid var(--foco); outline-offset: 2px; z-index: 1; }
.peca-num { position: absolute; left: 6px; top: 6px; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 8px; background: rgba(255,255,255,.94); color: var(--tinta); font-size: 15px; font-weight: 680; display: grid; place-items: center; }
.referencia { display: flex; align-items: center; gap: 24px; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; }
.referencia img { width: 210px; max-width: 42%; border-radius: 12px; border: 1px solid var(--linha); }

/* ---------- estatísticas ---------- */
/* Números reais de desempenho no jogo. Nada de leitura clínica: o produto não
   é dispositivo médico e não emite diagnóstico. */
.painel { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin: 24px 0; }
.medida { background: var(--papel); border: 1px solid var(--linha); border-radius: 15px; padding: 20px; }
.medida-rotulo { display: flex; align-items: center; gap: 9px; color: var(--tinta-suave); font-size: calc(.84rem * var(--escala)); font-weight: 650; }
.medida-valor { font-size: calc(2rem * var(--escala)); font-weight: 690; letter-spacing: -0.03em; margin-top: 10px; font-variant-numeric: tabular-nums; }
.medida-nota { font-size: calc(.82rem * var(--escala)); color: var(--tinta-suave); margin-top: 4px; }
.medida-nota[data-dir="sobe"] { color: var(--sucesso); font-weight: 650; }
.medida-nota[data-dir="desce"] { color: var(--dourado); font-weight: 650; }

.isencao { font-size: calc(.8rem * var(--escala)); color: var(--tinta-suave); border-top: 1px solid var(--linha); padding-top: 16px; margin-top: 4px; }

/* ---------- ranking ---------- */
.tabela-rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: calc(.96rem * var(--escala)); }
th, td { text-align: left; padding: 15px 14px; border-bottom: 1px solid var(--linha); }
th { font-size: calc(.82rem * var(--escala)); color: var(--tinta-suave); font-weight: 650; }
td { font-variant-numeric: tabular-nums; }
tr[data-eu="true"] td { background: var(--teal-claro); font-weight: 680; }
.vazio-msg { color: var(--tinta-suave); padding: 22px 0; }

/* ---------- diálogos ---------- */
dialog {
  border: 0; border-radius: var(--raio-g); padding: 36px;
  max-width: 540px; width: calc(100% - 28px);
  max-height: calc(100dvh - 32px); overflow: auto;
  background: var(--carta); color: var(--tinta);
  box-shadow: var(--sombra-2);
}
dialog::backdrop { background: rgba(14, 45, 52, .62); }
dialog h2 { margin-bottom: 12px; }
dialog > p { color: var(--tinta-suave); }
.dlg-topo { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; margin: 0 auto 20px; }
.dlg-topo[data-tom="bom"] { background: var(--sucesso-fundo); color: var(--sucesso); }
.dlg-topo[data-tom="assinatura"] { background: var(--dourado-fundo); color: #6b4a0d; }
.dlg-acoes { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.dlg-centro { text-align: center; }

.campo { display: block; margin-top: 20px; }
.campo > span { display: block; font-weight: 660; margin-bottom: 9px; }
.campo input {
  width: 100%; font: inherit; font-size: calc(1.15rem * var(--escala));
  padding: 16px 18px; min-height: var(--toque);
  border: 2px solid var(--linha-forte); border-radius: 12px; background: var(--carta); color: var(--tinta);
}
.campo input:focus-visible { border-color: var(--teal); }
.campo small { display: block; margin-top: 9px; color: var(--tinta-suave); font-size: calc(.84rem * var(--escala)); }
.erro-campo { color: var(--erro); font-weight: 650; margin-top: 12px; font-size: calc(.92rem * var(--escala)); }

.beneficios { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 13px; text-align: left; }
.beneficios li { display: flex; gap: 12px; align-items: flex-start; font-size: calc(.98rem * var(--escala)); }
.beneficios .ico { color: var(--sucesso); margin-top: 3px; }

/* ---------- rodapé e utilidades ---------- */
.rodape { border-top: 1px solid var(--linha); margin-top: 56px; padding: 26px 0; color: var(--tinta-suave); font-size: calc(.84rem * var(--escala)); }
.pular { position: fixed; left: 20px; top: -100px; z-index: 60; background: var(--teal); color: #fff; padding: 16px 20px; border-radius: 12px; text-decoration: none; }
.pular:focus { top: 14px; }
.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; }
.nota-audio { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 70; background: var(--teal); color: #fff; border-radius: 14px; padding: 16px 20px; width: min(440px, calc(100% - 32px)); box-shadow: var(--sombra-2); }

@media (max-width: 860px) {
  .painel { grid-template-columns: 1fr; }
  .grade-objetos { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 640px) {
  :root { font-size: 18px; --toque: 58px; }
  .topo-int { padding: 13px 16px; gap: 10px; }
  .marca-selo { width: 46px; height: 46px; border-radius: 13px; }
  .marca-nome { font-size: calc(1rem * var(--escala)); }
  .acesso .btn { padding: 12px 14px; }
  .acesso .btn span { display: none; }
  main { padding: 22px 16px 48px; }
  .jogo { grid-template-columns: auto 1fr; gap: 16px; padding: 18px; row-gap: 16px; }
  .jogo-nivel { grid-column: 1 / -1; justify-content: space-between; }
  .jogo-selo { width: 58px; height: 58px; border-radius: 16px; }
  .tabuleiro { padding: 20px 16px; }
  .acoes { flex-direction: column; }
  .acoes .btn { width: 100%; }
  .opcao-letra { width: 72px; min-height: 72px; }
  dialog { padding: 26px 20px; }
  .referencia img { width: 100%; max-width: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ============================================================================
   Ilustrações coloridas
   O traço único monocromático servia para controles, mas obrigava a ler o
   texto para distinguir um jogo do outro. Desenho colorido é reconhecido pela
   forma e pela cor — mais rápido, e muito mais confiável com visão reduzida.
   ========================================================================= */

.ilu { width: 1.9em; height: 1.9em; flex: none; display: block; overflow: visible; }
.ilu-g { width: 2.8em; height: 2.8em; }

/* O selo não pinta mais o desenho: cada ilustração traz a própria cor.
   O fundo só dá a família cromática do jogo. */
.jogo-selo { background: var(--teal-claro); color: inherit; }
.jogo-selo[data-cor="verde"]  { background: #dff0ea; }
.jogo-selo[data-cor="azul"]   { background: #dfeaf8; }
.jogo-selo[data-cor="ambar"]  { background: #fbeed3; }
.jogo-selo[data-cor="terra"]  { background: #f9e5da; }
.jogo-selo[data-cor="musgo"]  { background: #e4eee3; }
.jogo-selo[data-cor="pedra"]  { background: #e9e9e4; }

.jogo[data-travado="true"] .jogo-selo { background: #e9e9e4; }

/* Objetos do jogo de memória: o desenho é o conteúdo, não um enfeite —
   precisa de tamanho para ser reconhecido sem esforço. */
.objeto .ilu { width: 58px; height: 58px; }
.objeto[aria-pressed="true"] { background: var(--sucesso-fundo); border-color: var(--sucesso); }
.objeto[aria-pressed="true"] span { color: var(--sucesso); }

.dlg-topo .ilu { width: 46px; height: 46px; }

@media (max-width: 640px) {
  .objeto .ilu { width: 50px; height: 50px; }
}