/* ============================================================
   Neurodle — carrega depois de /jogo/jogo.css e herda de lá tokens,
   cabeçalho, botões (.btn-jogo), Braian e o modal (.story).
   ============================================================ */
:root{
  --certa:#2E7D5B;
  --presente:#B5761A;
  --ausente:#6B7390;
}

.nd-wrap{ max-width:560px; margin:0 auto; padding:0 16px 48px; }

/* ---------- Topo ---------- */
.nd-topo{
  position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  margin:18px 0 16px;
}
.nd-titulo{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(1.9rem, 6vw, 2.4rem); line-height:1; color:var(--navy-900); margin:0 0 6px;
}
.nd-modos{ display:inline-flex; gap:4px; margin-top:10px; padding:3px; border-radius:999px; background:var(--paper-dim); }
.nd-modos a{
  padding:5px 14px; border-radius:999px; font-size:.82rem; font-weight:700;
  color:var(--navy-700); text-decoration:none;
  transition:background-color .15s var(--ease-out), color .15s var(--ease-out);
}
.nd-modos a:hover{ color:var(--navy-500); }
.nd-modos a[aria-current="page"]{ background:var(--navy-900); color:var(--white); }
.nd-titulo em{ font-style:italic; font-weight:500; color:var(--navy-500); }
.nd-sub{ margin:0; font-size:.86rem; font-weight:600; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.nd-braian{ height:78px; width:auto; display:block; }


/* ---------- Tabuleiros ---------- */
/* --n (letras) e --k (quantas palavras) vêm do JS. --casa é calculada
   aqui, onde as duas existem: cabem --por-linha grades na largura útil. */
.nd-tabuleiros{
  --por-linha:var(--k, 1);
  --g:6px;           /* entre casas */
  --gt:14px;         /* entre grades */
  --max:60px;
  --largura:min(100vw - 32px, 528px);
  --casa:clamp(16px, calc(((var(--largura) - (var(--por-linha) - 1) * var(--gt)) / var(--por-linha) - (var(--n, 5) - 1) * var(--g)) / var(--n, 5)), var(--max));
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px var(--gt); margin:0 0 18px;
}
.nd-tabuleiros[data-k="2"], .nd-tabuleiros[data-k="3"]{ --g:4px; --max:48px; }
body[data-modo="duo"] .nd-wrap{ max-width:700px; }
body[data-modo="duo"] .nd-tabuleiros{ --largura:min(100vw - 32px, 668px); }
body[data-modo="trio"] .nd-wrap{ max-width:900px; }
body[data-modo="trio"] .nd-tabuleiros{ --largura:min(100vw - 32px, 868px); }
/* No celular o Trio fica 2 + 1: três grades lado a lado ficariam minúsculas. */
@media (max-width:699px){ .nd-tabuleiros[data-k="3"]{ --por-linha:2; } }
body[data-modo="duo"] .nd-teclado, body[data-modo="trio"] .nd-teclado,
body[data-modo="duo"] .nd-fim, body[data-modo="trio"] .nd-fim{ max-width:528px; margin-left:auto; margin-right:auto; }

.nd-tabuleiro{ display:grid; gap:var(--g); align-content:start; }
.nd-linha{ display:grid; grid-template-columns:repeat(var(--n, 5), var(--casa)); gap:var(--g); }
/* Palavra já descoberta: as linhas que sobraram ficam apagadas. */
.nd-tabuleiro--resolvido .nd-casa:not(.nd-casa--cheia){ opacity:.35; }
.nd-casa{
  width:var(--casa); height:var(--casa);
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--line); border-radius:calc(var(--casa) * .18); background:var(--white);
  font-family:var(--font-display); font-weight:700; font-size:calc(var(--casa) * .5);
  color:var(--navy-900); text-transform:uppercase; user-select:none;
}
.nd-casa--cheia{ border-color:var(--navy-300); animation:nd-pop .12s var(--ease-out); }
/* Linha atual: qualquer casa pode ser tocada; a do cursor fica marcada. */
.nd-casa--editavel{ cursor:pointer; }
.nd-casa--cursor{ border-color:var(--navy-500); box-shadow:inset 0 -4px 0 var(--navy-500); }
.nd-casa--certa, .nd-casa--presente, .nd-casa--ausente{ color:var(--white); border-color:transparent; }
.nd-casa--certa{ background:var(--certa); }
.nd-casa--presente{ background:var(--presente); }
.nd-casa--ausente{ background:var(--ausente); }

/* Ao revelar, cada casa vira (com atraso escalonado via JS). A cor já está
   aplicada; a animação só esconde a troca na metade do giro. */
.nd-casa--vira{ animation:nd-vira .5s var(--ease-out) both; }
@keyframes nd-vira{
  0%{ transform:rotateX(0); background:var(--white); color:var(--navy-900); border-color:var(--navy-300); }
  49%{ background:var(--white); color:var(--navy-900); border-color:var(--navy-300); }
  50%{ transform:rotateX(90deg); }
  100%{ transform:rotateX(0); }
}
@keyframes nd-pop{ 50%{ transform:scale(1.06); } }
.nd-linha--treme{ animation:nd-treme .36s; }
@keyframes nd-treme{
  20%{ transform:translateX(-6px); } 40%{ transform:translateX(6px); }
  60%{ transform:translateX(-4px); } 80%{ transform:translateX(4px); }
}

/* ---------- Teclado ---------- */
.nd-teclado{ display:grid; gap:7px; user-select:none; }
.nd-fileira{ display:flex; justify-content:center; gap:5px; }
.nd-tecla{
  flex:1 1 0; min-width:0; max-width:46px; height:54px; padding:0;
  border:0; border-radius:8px; background-color:var(--paper-dim); color:var(--navy-900);
  font-weight:700; font-size:.95rem; cursor:pointer;
  transition:background-color .15s var(--ease-out), transform .08s var(--ease-out);
  touch-action:manipulation;
}
.nd-tecla:hover{ background-color:var(--navy-100); }
.nd-tecla:active{ transform:scale(.94); }
.nd-tecla--larga{ flex:1.6 1 0; max-width:76px; font-size:.8rem; }
.nd-tecla[data-estado="certa"]{ background:var(--certa); color:var(--white); }
.nd-tecla[data-estado="presente"]{ background:var(--presente); color:var(--white); }
.nd-tecla[data-estado="ausente"]{ background:var(--ausente); color:var(--white); opacity:.75; }
/* Duo/Trio: tecla neutra com uma faixa embaixo, um pedaço por palavra. */
.nd-tecla[data-estado="faixas"]{ background-image:var(--faixas); background-size:100% 8px; background-position:bottom; background-repeat:no-repeat; }

/* ---------- Fim ---------- */
.nd-fim{
  margin-top:96px; padding:0 22px 32px; display:flow-root;
  background:linear-gradient(135deg, var(--navy-500), var(--navy-800) 70%);
  color:var(--white); text-align:center; border-radius:var(--radius-md);
}
.nd-fim :focus-visible{ outline-color:var(--white); }
.nd-braian--fim{
  display:block; height:130px; width:auto; margin:-92px auto 8px;
  filter:drop-shadow(0 14px 20px rgba(11,18,48,.35));
}
.nd-fim-titulo{ font-family:var(--font-display); font-weight:700; font-size:1.5rem; margin:0 0 6px; }
.nd-fim-titulo:focus{ outline:none; }
.nd-fim-palavras{ display:grid; gap:14px; margin:0 0 22px; }
.nd-fim-palavras .nd-fim-dica{ margin-bottom:0; }
.nd-fim-palavra--errou{ background:rgba(179,65,44,.45); }
.nd-fim-palavra{
  display:inline-block; margin:4px 0 10px; padding:6px 16px; border-radius:10px;
  background:rgba(255,255,255,.14); font-family:var(--font-display); font-weight:700;
  font-size:1.35rem; letter-spacing:.12em;
}
.nd-fim-dica{ max-width:42ch; margin:0 auto 22px; font-size:.92rem; line-height:1.55; color:var(--navy-100); }

.nd-stats{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin:0 0 18px; }
.nd-stats div{ display:flex; flex-direction:column-reverse; justify-content:flex-end; gap:2px; }
.nd-stats dt{ font-size:.7rem; line-height:1.25; color:var(--navy-300); }
.nd-stats dd{ margin:0; font-family:var(--font-display); font-weight:700; font-size:1.5rem; font-variant-numeric:tabular-nums; }

.nd-dist-titulo{ margin:0 0 8px; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--navy-300); }
.nd-dist{ list-style:none; margin:0 auto 22px; padding:0; max-width:320px; display:grid; gap:5px; text-align:left; }
.nd-dist li{ display:flex; align-items:center; gap:8px; font-size:.82rem; font-weight:700; }
.nd-dist-num{ width:1ch; color:var(--navy-100); }
.nd-dist-barra{
  --p:0;
  min-width:26px; width:calc(26px + (100% - 26px) * var(--p));
  padding:1px 8px; border-radius:6px; text-align:right;
  background:rgba(255,255,255,.18); font-variant-numeric:tabular-nums;
}
.nd-dist-barra--hoje{ background:var(--certa); }

.nd-fim-proxima{ margin:16px 0 0; font-size:.86rem; font-weight:600; color:var(--navy-100); font-variant-numeric:tabular-nums; }
.nd-fim-proxima .btn-jogo{ margin-top:8px; }

/* ---------- Como jogar ---------- */
.nd-regras{ text-align:left; }
.nd-regras p{ margin:0 0 12px; font-size:.92rem; line-height:1.55; color:var(--ink-soft); }
.nd-regras strong{ color:var(--navy-900); }
.nd-regras .btn-jogo{ width:100%; margin-top:6px; }
.nd-exemplos{ list-style:none; margin:0 0 14px; padding:0; display:grid; gap:8px; font-size:.9rem; color:var(--ink-soft); }
.nd-exemplos li{ display:flex; align-items:center; gap:10px; }
.nd-mini{
  flex:0 0 auto; width:32px; height:32px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; color:var(--white);
}
.nd-mini--certa{ background:var(--certa); }
.nd-mini--presente{ background:var(--presente); }
.nd-mini--ausente{ background:var(--ausente); }

@media (max-width:380px){
  .nd-tecla{ height:50px; font-size:.88rem; }
  .nd-fileira{ gap:4px; }
}

/* O link do Neurodle é mais comprido que o do Show do Neurão e estourava
   a caixa em telas estreitas. */
.story-dica strong{ overflow-wrap:anywhere; }

/* Duo/Trio no celular: as grades passam da altura da tela, então o teclado
   fica preso no rodapé enquanto a página rola. */
@media (max-width:699px){
  body[data-modo="duo"] .nd-teclado, body[data-modo="trio"] .nd-teclado{
    position:sticky; bottom:0; z-index:5;
    padding:14px 0 10px; margin:0 -16px; padding-left:16px; padding-right:16px;
    background:linear-gradient(to bottom, rgba(245,248,255,0), var(--paper) 14px);
  }
}