:root {
  --blue-500: #185BE2;
  --teal-900: #1E3A3A; --teal-800: #234848; --teal-700: #275151; --teal-600: #2E5E5E;
  --teal-500: #3A7272; --teal-400: #5A9494; --teal-300: #7FB5B5; --teal-200: #B3E2E1; --teal-100: #E0F5F5;
  --green-700: #108930; --green-600: #13A038; --green-500: #1AB847;
  --orange-600: #EF5120; --orange-500: #F06B3F;
  --neutral-900: #111111; --neutral-800: #222222; --neutral-700: #333333; --neutral-600: #444444;
  --neutral-500: #666666; --neutral-400: #8C8781; --neutral-300: #C9C9C9; --neutral-200: #E0E3E6;
  --neutral-100: #F0F0F0;
  --surface-white: #FFFFFF;
  --surface-light: #FAF9F7;  /* fundo claro da zona de leitura/SEO */
  --border-default: #C9C9C9; --border-light: #E0E3E6;
  --link-resource: #007AAA;  /* títulos/links dos cards (home) */
  --shadow-card: 0 2px 10px rgba(0,0,0,.08);
  --ink: #333333; --ink-soft: #666666;
  --f-ui: 'Open Sans', Helvetica, Arial, sans-serif;
  --f-reading: Georgia, Times, 'Times New Roman', serif;
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px;
  --shadow-lg: 0 8px 30px rgba(0,0,0,.35);

  /* ── Tema claro (fundo off-white, cores originais do jogo) ── */
  --surface-page: #FAF9F7;       /* off-white: fundo do jogo */
  --surface-header: #FFFFFF;     /* cabeçalho branco */

  /* Game colors — cores clássicas originais do Termo Bíblico */
  --color-correct: #538d4e;      /* verde */
  --color-present: #b59f3b;      /* dourado */
  --color-absent: #3a3a3c;       /* cinza escuro */
  --cell-bg: #FFFFFF;            /* fundo da célula vazia */
  --cell-border: #D9D9D9;        /* contorno da célula vazia */
  --cell-filled-border: #666666; /* célula digitada (ainda não enviada) */
  --cell-cursor: var(--teal-600);/* barra inferior do cursor */
  --cell-text: var(--ink);       /* letra em célula vazia/digitada */
  --key-bg: #FFFFFF;             /* tecla do teclado */
  --key-text: #3A3A3C;
  --key-border: #E2E2E2;         /* contorno da tecla */
  --color-empty: transparent;

  /* Layout estilo TERMO (term.ooo) — fit de ecrã completo */
  --board-gap: 4px;              /* espaço entre caixas */
  --cell: 56px;                  /* tamanho da caixa (ajustado por JS) */
  --keyh: clamp(48px, 8vh, 64px); /* altura das teclas */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-ui);
  font-size: 16px;
  background: var(--surface-page);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ─── Ecrã do jogo (ocupa toda a viewport no mobile) ─── */
.game-screen {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  overflow: hidden;
}

/* ─── Header ─────────────────────────────────────── */
.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-light);
  background: var(--surface-header);
}
.header-left, .header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Logo TERMO / BÍBLICO em duas linhas (estilo TERMO) */
.logo {
  flex: 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: .96;
  text-transform: uppercase;
  font-weight: 800;
}
.logo span:first-child {
  font-size: 1.55rem;
  letter-spacing: .14em;
  color: var(--ink);
}
.logo span:last-child {
  font-size: 1.05rem;
  letter-spacing: .2em;
  color: var(--teal-700);
}
/* Botões de ícone (estilo TERMO: quadrado arredondado com contorno) */
.icon-btn {
  width: 40px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1.5px solid var(--border-default);
  border-radius: 8px;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.icon-btn:hover { background: var(--teal-100); border-color: var(--teal-300); color: var(--teal-700); }
.icon-btn svg { display: block; }

/* ─── Toast ──────────────────────────────────────── */
#toast {
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--neutral-800);
  color: #fff;
  padding: 8px 18px;
  border-radius: var(--r-md);
  font-size: .88rem;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms, transform 200ms;
  z-index: 200;
  white-space: nowrap;
}
#toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ─── Main ───────────────────────────────────────── */
.game-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 6px 8px 8px;
}
/* Área do tabuleiro: ocupa o espaço livre e centra o grid */
.board-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── Grid ───────────────────────────────────────── */
#grid {
  display: flex;
  flex-direction: column;
  gap: var(--board-gap);
}
.grid-row {
  display: flex;
  gap: var(--board-gap);
}
.grid-cell {
  width: var(--cell);
  height: var(--cell);
  border: 2px solid var(--cell-border);
  background: var(--cell-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--cell) * .46);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--cell-text);
  border-radius: calc(var(--cell) * .1);
  transition: border-color 100ms, background 100ms;
  user-select: none;
  cursor: pointer;
}
.grid-cell[data-state="tbd"] {
  border-color: var(--cell-filled-border);
}
/* Célula do cursor: contorno discreto + barra inferior grossa (estilo TERMO) */
.grid-cell.active {
  border-color: var(--teal-600);
  border-bottom: calc(var(--cell) * .13) solid var(--cell-cursor);
}
.grid-cell[data-state="correct"] {
  background: var(--color-correct);
  border-color: var(--color-correct);
  color: #fff;
}
.grid-cell[data-state="present"] {
  background: var(--color-present);
  border-color: var(--color-present);
  color: #fff;
}
.grid-cell[data-state="absent"] {
  background: var(--color-absent);
  border-color: var(--color-absent);
  color: #fff;
}

/* ─── Animations ─────────────────────────────────── */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 50%, 90% { transform: translateX(-4px); }
  30%, 70% { transform: translateX(4px); }
}
.shake { animation: shake 0.5s ease; }

@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.pop { animation: pop 120ms ease; }

@keyframes flip-out {
  0% { transform: rotateX(0); }
  100% { transform: rotateX(-90deg); }
}
@keyframes flip-in {
  0% { transform: rotateX(90deg); }
  100% { transform: rotateX(0); }
}
.flip {
  animation: flip-out 150ms ease forwards;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-20px); }
  60% { transform: translateY(-10px); }
}
.bounce { animation: bounce 0.5s ease; }

/* ─── Keyboard (estilo TERMO) ─────────────────────── */
#keyboard {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  margin: 0 auto;
  padding-bottom: max(4px, env(safe-area-inset-bottom));
}
.kb-row {
  display: grid;
  grid-template-columns: repeat(10, 1fr);  /* every key identical width across all rows */
  gap: 6px;
}
.kb-key {
  height: var(--keyh);
  min-width: 0;
  border: 1px solid var(--key-border);
  border-radius: 8px;
  background: var(--key-bg);
  color: var(--key-text);
  font-family: var(--f-ui);
  font-size: 1.05rem;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 100ms, color 100ms;
}
.kb-key { font-size: calc(var(--keyh) * 0.4); }   /* letter glyph scales smoothly with key size (responsive) */
.kb-key:active { transform: scale(.95); }
.kb-key:hover { filter: brightness(.97); }
.kb-wide {
  grid-column: 9 / span 2;  /* ENTER: 2 cols, flush right → column 8 stays empty = a gap before it */
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.kb-key[data-state="correct"] { background: var(--color-correct); color: #fff; border-color: var(--color-correct); }
.kb-key[data-state="present"] { background: var(--color-present); color: #fff; border-color: var(--color-present); }
.kb-key[data-state="absent"]  { background: var(--color-absent);  color: #fff; border-color: var(--color-absent); }

/* ─── Footer ─────────────────────────────────────── */
.game-footer {
  text-align: center;
  padding: 20px 12px 28px;
  font-size: .85rem;
  color: var(--ink-soft);
  background: var(--surface-light);
}
.game-footer a { color: var(--teal-600); text-decoration: none; font-weight: 600; }
.game-footer a:hover { text-decoration: underline; }

/* ─── Conteúdo / SEO (zona clara, cards estilo home BibliaOn) ─── */
.seo {
  background: var(--surface-light);
  color: var(--ink);
  padding: 28px 16px 8px;
}
.seo-inner {
  max-width: 680px;
  margin: 0 auto;
}
.seo h2 {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--teal-800);
  margin: 0 0 10px;
}
.seo .seo-lead {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 22px;
}
.seo-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}
.seo-card {
  background: var(--surface-white);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  padding: 18px 18px 16px;
}
.seo-card h3 {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--link-resource);
  margin: 0 0 8px;
}
.seo-card p {
  font-size: .92rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}
.seo-card p + p { margin-top: 8px; }

.seo-section-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--teal-800);
  margin: 0 0 12px;
}
.faq-item {
  background: var(--surface-white);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.faq-item h4 {
  font-size: .95rem;
  font-weight: 700;
  color: var(--teal-700);
  margin: 0 0 6px;
}
.faq-item p {
  font-size: .9rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}
.faq-item a, .seo-lead a, .seo-card a { color: var(--link-resource); font-weight: 600; text-decoration: none; }
.faq-item a:hover, .seo-lead a:hover, .seo-card a:hover { text-decoration: underline; }

.seo-more {
  margin: 24px 0 4px;
}
.seo-more a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-white);
  border: 1px solid var(--border-light);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  font-weight: 700;
  font-size: .95rem;
  color: var(--teal-800);
  text-decoration: none;
  transition: background var(--t-base, 200ms), border-color var(--t-base, 200ms);
}
.seo-more a:hover { background: var(--teal-100); border-color: var(--teal-300); }
.seo-more a .arrow { color: var(--teal-600); font-size: 1.1rem; }

/* ─── Modal ──────────────────────────────────────── */
#modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms;
}
#modal-overlay.open { opacity: 1; pointer-events: all; }

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.96);
  background: var(--surface-white);
  border-radius: var(--r-lg);
  padding: 28px 24px 24px;
  max-width: 420px;
  width: calc(100% - 32px);
  z-index: 400;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms, transform 200ms;
  max-height: 90vh;
  overflow-y: auto;
}
.modal.open { opacity: 1; pointer-events: all; transform: translate(-50%, -50%) scale(1); }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.modal-title {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--teal-800);
  text-transform: uppercase;
  margin: 0;
}
.modal-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--neutral-400);
  padding: 4px 8px;
  border-radius: var(--r-sm);
  line-height: 1;
}
.modal-close:hover { background: var(--teal-100); color: var(--teal-700); }

/* ─── Como jogar modal ───────────────────────────── */
.como-text { font-size: .92rem; line-height: 1.6; color: var(--ink); margin: 0 0 14px; }
.como-example {
  display: flex;
  gap: 6px;
  margin: 12px 0;
}
.ex-cell {
  width: 46px; height: 46px;
  border: 2px solid transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 800; border-radius: 8px;
  color: #fff;
}
.ex-cell.correct { background: var(--color-correct); border-color: var(--color-correct); }
.ex-cell.present { background: var(--color-present); border-color: var(--color-present); }
.ex-cell.absent  { background: var(--color-absent);  border-color: var(--color-absent);  }
.ex-cell.empty   { background: transparent; border-color: var(--neutral-300); color: var(--ink); }
.ex-label { font-size: .8rem; color: var(--ink-soft); margin-top: 4px; }

/* ─── Stats modal / fim modal ────────────────────── */
.fim-msg {
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  margin: 0 0 20px;
  line-height: 1.4;
  color: var(--ink);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}
.stat-box {
  text-align: center;
  background: var(--teal-100);
  border-radius: var(--r-md);
  padding: 10px 4px;
}
.stat-num { font-size: 1.5rem; font-weight: 800; color: var(--teal-700); }
.stat-lbl { font-size: .68rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; }

.dist-title {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--neutral-500);
  margin: 0 0 10px;
  font-weight: 700;
}
.dist-chart { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; }
.dist-row { display: flex; align-items: center; gap: 8px; }
.dist-label { font-size: .85rem; font-weight: 700; color: var(--ink-soft); width: 14px; text-align: right; }
.dist-bar-wrap { flex: 1; }
.dist-bar {
  background: var(--neutral-400);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
  min-width: 24px;
  text-align: right;
  transition: width .4s ease;
}
.dist-bar.highlight { background: var(--color-correct); }

/* Modal de vitória: cabeçalho fixo, conteúdo rolável, rodapé branco colado ao fundo */
#modal-fim {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 0;
}
#modal-fim #fim-content {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}
/* Rodapé branco sólido (botão sempre visível, nada aparece por baixo) */
.fim-foot {
  flex-shrink: 0;
  background: var(--surface-white);
  padding: 12px 0 20px;
  border-top: 1px solid var(--border-light);
}
.fim-countdown {
  text-align: center;
  font-size: .85rem;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.btn-share {
  display: block;
  width: 100%;
  padding: 12px;
  background: var(--color-correct);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  font-family: var(--f-ui);
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 150ms;
}
.btn-share:hover { background: var(--green-700); }

/* ─── Card bíblico (vitória) ──────────────────────── */
.card-vitoria {
  background: #E9F6F4;            /* teal suave da marca */
  border-radius: var(--r-md);
  padding: 18px 20px;
  margin-bottom: 20px;
  text-align: left;
}
.card-palavra {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--teal-600);
  margin-bottom: 6px;
}
.card-titulo {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--teal-800);
  margin-bottom: 12px;
  line-height: 1.3;
}
.card-texto {
  font-family: var(--f-reading);
  font-size: .98rem;
  color: var(--ink);
  line-height: 1.62;
  margin-bottom: 14px;
}
.card-texto p { margin: 0 0 8px; }
.card-texto p:last-child { margin-bottom: 0; }
/* Versículo: citação com régua lateral (sem caixa preenchida) */
.card-versiculo {
  margin: 0;
  padding: 2px 0 2px 14px;
  border-left: 3px solid var(--teal-400);
}
.card-versiculo p {
  margin: 0 0 6px;
  font-family: var(--f-reading);
  font-size: .92rem;
  font-style: italic;
  color: #3a4a4a;
  line-height: 1.55;
}
.card-versiculo cite {
  font-size: .82rem;
  font-style: normal;
  font-weight: 700;
  color: var(--teal-700);
}

/* ─── Responsive ─────────────────────────────────── */
/* Tamanho da caixa é calculado por JS (resizeBoard) para caber sempre no ecrã;
   a altura das teclas escala por vh. Sem overrides fixos aqui. */
@media (max-width: 360px) {
  .logo span:first-child { font-size: 1.35rem; }
  .logo span:last-child { font-size: .95rem; }
  .icon-btn { width: 36px; height: 36px; }
}