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

/* O jogo vive dentro do layout partilhado do BibliaOn. Tudo é scoped a
   .termo-app para não tocar no resto do site (resets, fontes, etc.). */
.termo-app, .termo-app *, .termo-app *::before, .termo-app *::after { box-sizing: border-box; }
.termo-app {
  font-family: var(--f-ui);
  font-size: 16px;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* Título + intro da página (estilo "inside" do BibliaOn) */
.termo-page-title { margin: 0 0 6px; font-size: 1.9rem; font-weight: 800; color: var(--neutral-900); }
.termo-page-intro { margin: 0 0 20px; font-size: 1rem; line-height: 1.55; color: var(--ink-soft); }

/* ─── Ecrã do jogo: cartão contido (estilo .color-box do site) ─── */
.termo-app .game-screen {
  height: clamp(520px, 82vh, 720px);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 600px;                    /* cartão centrado na coluna de conteúdo (desktop) */
  margin: 0 auto 24px;
  background: #F5F3F0;                 /* mesmo tom dos cartões do site */
  border-radius: 5px;
  box-shadow: 0 0 2px rgba(0,0,0,.1), 0 1px 5px rgba(0,0,0,0.1);
  overflow: hidden;
}

/* Barra do jogo. Desktop: só as ações (logo/título do site já estão no header) */
.game-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 0;
  flex-shrink: 0;
  position: relative;
  z-index: 2;            /* acima do tabuleiro (cliques garantidos) */
  transition: background-color .22s ease, border-color .22s ease;
}
.game-bar__logo,
.game-bar__title { display: none; }          /* só aparecem no app mobile */
.game-bar .game-bar__menu { display: none; } /* hambúrguer só no app mobile (vence .icon-btn) */
.game-bar__actions {
  display: flex;
  gap: 8px;
  margin-left: auto;     /* empurra as ações para a direita no desktop */
}

/* ─── Mobile: app em ecrã inteiro (term.ooo-style) — sem moldura do site, sem scroll ─── */
@media (max-width: 640px) {
  /* A .game-bar é o "navbar" visível. Mantemos o #header no DOM (colapsado) para
     o menu do site (#top-nav) continuar a funcionar como overlay, acionado pelo
     hambúrguer da app. */
  body.termo-page #header {
    height: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    overflow: visible;        /* deixa o #top-nav (overlay absoluto) escapar */
    z-index: 9999;
  }
  body.termo-page #header .container { padding: 0; }
  /* Esconde a barra visível do header do site (ES = .header--top-bar), para o 1.º
     ecrã ser só a app. O menu (.menu-mobile) fica no DOM como overlay, acionado
     pelo hambúrguer da game-bar (que clica no .toggle-menu--button, mesmo oculto). */
  body.termo-page #header .header--top-bar,
  body.termo-page .top-mobile-ad-banner,
  body.termo-page .breadcrumbs,
  body.termo-page .termo-page-title,
  body.termo-page .termo-page-intro { display: none !important; }

  /* o jogo arranca colado ao topo (1.º ecrã = só a app) */
  body.termo-page .container { padding-top: 0; padding-bottom: 0; }
  body.termo-page #content { margin-top: 0; }

  /* o jogo preenche a viewport, de bordo a bordo */
  .termo-app .game-screen {
    height: 100dvh;
    width: 100vw;
    max-width: none;
    margin: 0 0 16px;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: var(--surface-page);
    border-radius: 0;
    box-shadow: none;
  }

  /* a barra vira o app header: logo Bíbliaon (esq) + logo Termo (centro) + ações (dir) */
  .game-bar {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-light);
    background: var(--surface-header, #fff);
  }
  .game-bar .game-bar__menu { display: inline-flex; flex-shrink: 0; }
  .game-bar__logo { display: inline-flex; align-items: center; flex-shrink: 0; }
  .game-bar__logo img { height: 16px; width: auto; display: block; }
  .game-bar__logo .game-bar__logo-img--gold { display: none; }   /* só no estado escuro (menu aberto) */
  /* Logo "Termo Bíblico" em duas linhas (estilo do mockup) */
  .game-bar__title {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: .94;
    text-transform: uppercase;
    font-weight: 800;
  }
  .game-bar__title span:first-child { font-size: 1.15rem; letter-spacing: .12em; color: var(--ink); transition: color .22s ease; }
  .game-bar__title span:last-child { font-size: .78rem;  letter-spacing: .2em;  color: var(--teal-700); transition: color .22s ease; }
  .game-bar__actions { margin-left: 0; flex-shrink: 0; }
  .game-bar .icon-btn { transition: color .22s ease, border-color .22s ease; }
  .game-bar__logo img { transition: filter .22s ease; }

  /* Menu aberto → a navbar da app fica preta, a condizer com o menu do site */
  body.termo-page.menu-open .game-bar {
    background: #2c2c2c;
    border-bottom-color: rgba(255,255,255,.14);
  }
  body.termo-page.menu-open .game-bar__title span { color: #fff !important; }
  body.termo-page.menu-open .game-bar .icon-btn,
  body.termo-page.menu-open .game-bar .icon-btn:hover,
  body.termo-page.menu-open .game-bar .icon-btn:focus,
  body.termo-page.menu-open .game-bar .icon-btn:active {
    background: transparent;            /* sem fundo verde do hover/tap — fica preto como a navbar */
    color: #fff;
    border-color: rgba(255,255,255,.28);
  }
  /* logo dourado (logo.svg) no estado escuro; preto no estado claro */
  body.termo-page.menu-open .game-bar__logo-img--default { display: none; }
  body.termo-page.menu-open .game-bar__logo-img--gold { display: block; }

  /* teclas com tamanho do mockup, mas a LETRA reduz no mobile
     (#keyboard .kb-key vence a regra base .kb-key, que vem depois no ficheiro) */
  #keyboard .kb-key { font-size: calc(var(--keyh) * 0.32); }
  /* o ENTER é uma palavra: acompanha o teclado mas fica compacto (não tão grande como as letras) */
  #keyboard .kb-wide { font-size: calc(var(--keyh) * 0.22); }
}

/* ─── 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);
}
.termo-app .header-left, .termo-app .header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Logo TERMO / BÍBLICO em duas linhas (estilo TERMO) */
.termo-app .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;
}
.termo-app .logo span:first-child {
  font-size: 1.55rem;
  letter-spacing: .14em;
  color: var(--ink);
}
.termo-app .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) */
.termo-app .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;
  touch-action: manipulation;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.termo-app .icon-btn:hover { background: var(--teal-100); border-color: var(--teal-300); color: var(--teal-700); }
.termo-app .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 4px 8px;
}
/* Área do tabuleiro: ocupa o espaço livre e centra o grid (com folga p/ o teclado) */
.board-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0 16px;
}

/* ─── 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;
  touch-action: manipulation;
}
.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); }
}
.termo-app .shake { animation: shake 0.5s ease; }

@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.termo-app .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); }
}
.termo-app .flip {
  animation: flip-out 150ms ease forwards;
}

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

/* ─── Keyboard (estilo TERMO) ─────────────────────── */
#keyboard {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  max-width: 484px;          /* centrado, na mesma proporção tabuleiro/teclado do Termo clássico */
  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;
}
/* Middle row carries the extra Ñ key (Spanish) → 11 columns; its keys sit a touch
   narrower than the other rows, like a real ES QWERTY keyboard. */
.kb-row--wide {
  grid-template-columns: repeat(11, 1fr);
}
.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;
  touch-action: manipulation;   /* elimina o atraso de ~300ms do toque (double-tap-zoom) */
  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: #fff;
  color: var(--ink);
  padding: 8px 0 0;
}
.seo-inner {
  max-width: 680px;
  margin: 0 auto;
}
.seo h2 {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--teal-800);
  margin: 4px 0 12px;
}
.seo .seo-lead {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 28px;
}

/* ── "Como funciona": linhas full-width com acento nas cores do jogo ── */
.seo-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 36px;
}
.seo-card {
  background: var(--surface-white);
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--color-correct);   /* verde */
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  padding: 16px 20px;
  transition: border-color 150ms ease, background 150ms ease;
}
.seo-card:nth-child(2) { border-left-color: var(--color-present); }  /* dourado */
.seo-card:nth-child(3) { border-left-color: var(--teal-400); }       /* teal */
.seo-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--teal-800);
  margin: 0 0 4px;
}
.seo-card p {
  font-size: .94rem;
  line-height: 1.62;
  color: var(--ink-soft);
  margin: 0;
}
.seo-card p + p { margin-top: 8px; }
/* Desktop: título à esquerda, texto à direita (aproveita a largura) */
@media (min-width: 560px) {
  .seo-card { display: flex; align-items: baseline; gap: 22px; }
  .seo-card h3 { flex: 0 0 168px; margin: 0; }
  .seo-card div, .seo-card p { flex: 1; }
}

/* ── Perguntas frequentes ── */
.seo-section-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--teal-800);
  margin: 0 0 16px;
}
.termo-app .faq-item {
  background: var(--surface-light);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin-bottom: 10px;
  transition: border-color 150ms ease, background 150ms ease;
}
.termo-app .faq-item:hover { border-color: var(--teal-300); background: var(--teal-100); }
.termo-app .faq-item h4 {
  font-size: .98rem;
  font-weight: 700;
  color: var(--teal-800);
  margin: 0 0 6px;
}
.termo-app .faq-item p {
  font-size: .92rem;
  line-height: 1.62;
  color: var(--ink-soft);
  margin: 0;
}
.termo-app .faq-item a, .seo-lead a, .seo-card a { color: var(--teal-700); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.termo-app .faq-item a:hover, .seo-lead a:hover, .seo-card a:hover { color: var(--teal-800); }

/* ── CTA: outros jogos ── */
.seo-more {
  margin: 30px 0 8px;
  text-align: center;
}
.seo-more a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--teal-700);
  border-radius: 100px;
  padding: 13px 28px;
  font-weight: 700;
  font-size: .95rem;
  color: #fff;
  text-decoration: none;
  transition: background 150ms ease, transform 150ms ease;
}
.seo-more a:hover { background: var(--teal-800); transform: translateY(-1px); }
.seo-more a .arrow { font-size: 1.15rem; line-height: 1; }

/* ─── 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); }
/* O site define um `.modal { display:none }` global (popups). Forçamos o display
   nos modais do jogo, com especificidade superior (.termo-app .modal). */
.termo-app .modal { display: block; }
.termo-app #modal-fim { display: flex; }

/* Pega (grabber) — só visível como folha no mobile */
.modal-grabber { display: none; }

/* ─── Mobile: modais sobem como bottom-sheet arrastável (estilo folha do site) ─── */
@media (max-width: 640px) {
  .modal {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 120px);  /* pára abaixo do topo fixo (ad 56px + nav 50px) — grabber sempre visível */
    margin: 0;
    transform: translateY(100%);
    border-radius: 16px 16px 0 0;
    padding: 6px 18px calc(18px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 30px rgba(0,0,0,.18);
  }
  .modal.open { transform: translateY(0); }
  /* Pega arrastável: área de toque larga no topo; touch-action:none p/ não rolar a página */
  .modal-grabber {
    display: block;
    position: relative;
    height: 24px;
    flex-shrink: 0;
    touch-action: none;
    cursor: grab;
  }
  .modal-grabber:active { cursor: grabbing; }
  .modal-grabber::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 5px;
    border-radius: 999px;
    background: var(--neutral-300);
  }
  /* O modal de resultado mantém cabeçalho/rodapé fixos e conteúdo rolável */
  #modal-fim { padding-bottom: 0; }
  .fim-burst { border-radius: 16px 16px 0 0; }
}

.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;
}
.termo-app .stat-box {
  text-align: center;
  background: var(--teal-100);
  border-radius: var(--r-md);
  padding: 10px 4px;
}
.termo-app .stat-num { font-size: 1.5rem; font-weight: 800; color: var(--teal-700); }
.termo-app .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;
}

/* Como jogar / Estatísticas: mesmo padrão — cabeçalho (e pega) fixos, corpo rolável */
#modal-como,
#modal-stats-header {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#modal-como > .modal-grabber,
#modal-como > .modal-header,
#modal-stats-header > .modal-grabber,
#modal-stats-header > .modal-header { flex-shrink: 0; }
#modal-como .modal-body,
#modal-stats-header #stats-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;
}
.termo-app .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;
}
.termo-app .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;
  position: relative;            /* contexto p/ brilhos e reflexo da vitória */
  overflow: hidden;
}
.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;
  /* Anula o estilo global de <blockquote> do site (fundo #f5f3f0 + cantos), que
     estava a pintar a caixa. Só a régua teal à esquerda, sem caixa (como no bibliaon). */
  background: transparent;
  border-radius: 0;
  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) {
  .termo-app .logo span:first-child { font-size: 1.35rem; }
  .termo-app .logo span:last-child { font-size: .95rem; }
  .termo-app .icon-btn { width: 36px; height: 36px; }
}

/* ─── Animação de vitória ─────────────────────────────
   Reforço positivo no modal de resultado quando o jogador acerta.
   Tudo gated por .is-win (o card também aparece na derrota) e por
   prefers-reduced-motion. Paleta BibliaOn: dourado, teal, verde. */

/* Card da Palavra do Dia: entrada com pop + halo interno pulsante */
.card-vitoria.is-win {
  border: 2px solid transparent;            /* borda que ganha cor na animação */
  animation: card-pop .6s cubic-bezier(.2,.9,.25,1) both,
             card-glow 2.6s ease .3s 1 both;
}
/* Reflexo de luz que passa uma vez sobre o card */
.card-vitoria.is-win::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 33%, rgba(255,255,255,.78) 50%, transparent 67%);
  transform: translateX(-130%);
  animation: card-shine 1s ease .45s 1 both;
}

@keyframes card-pop {
  0% { opacity: 0; transform: scale(.82) translateY(16px); }
  45% { opacity: 1; transform: scale(1.06) translateY(0); }
  68% { transform: scale(.97); }
  84% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* Halo interno: brilho (inset) + borda colorida — nunca recortado pelo modal */
@keyframes card-glow {
  0% { border-color: rgba(212,175,55,0);   box-shadow: inset 0 0 0 0 rgba(212,175,55,0); }
  14% { border-color: rgba(212,175,55,.95);  box-shadow: inset 0 0 26px 2px rgba(212,175,55,.5); }   /* dourado */
  30% { border-color: rgba(212,175,55,0);   box-shadow: inset 0 0 0 0 rgba(212,175,55,0); }
  46% { border-color: rgba(58,114,114,.95);  box-shadow: inset 0 0 24px 2px rgba(58,114,114,.45); }  /* teal */
  62% { border-color: rgba(58,114,114,0);   box-shadow: inset 0 0 0 0 rgba(58,114,114,0); }
  78% { border-color: rgba(83,141,78,.95);   box-shadow: inset 0 0 24px 2px rgba(83,141,78,.45); }   /* verde */
  100% { border-color: rgba(127,181,181,.5);  box-shadow: inset 0 0 0 0 rgba(0,0,0,0); }
}

@keyframes card-shine {
  from { transform: translateX(-130%); }
  to { transform: translateX(130%); }
}

/* Brilhos (✦) que estouram dentro do card */
.card-spark {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  line-height: 1;
  text-shadow: 0 0 6px currentColor;
  z-index: 2;
  animation: card-spark .9s ease forwards;
}
@keyframes card-spark {
  0% { opacity: 0; transform: scale(0) rotate(0deg); }
  45% { opacity: 1; transform: scale(1.3) rotate(40deg); }
  100% { opacity: 0; transform: scale(.4) rotate(80deg); }
}

/* Estouro de luz/confete sobre o modal inteiro (camada não recortada;
   é irmã de #fim-content, por isso o overflow:auto do scroll não a corta) */
.fim-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
  border-radius: var(--r-lg);     /* igual ao raio do modal */
}
.fim-confete {
  position: absolute;
  top: -16px;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  opacity: 0;
  line-height: 1;
  animation: confete-fall 1.8s ease-in forwards;
}
.fim-confete.star {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none !important;
  text-shadow: 0 0 6px currentColor;
}
@keyframes confete-fall {
  0% { opacity: 0; transform: translateY(-16px) rotate(0deg); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translateY(var(--fall, 460px)) rotate(var(--rot, 360deg)); }
}

/* Mensagem "Boa! Acertou…": "Boa!" entra com pop em verde; o resto sobe a seguir */
.fim-boa {
  display: inline-block;
  color: var(--green-600);
  font-weight: 800;
  animation: msg-pop .5s cubic-bezier(.2,.85,.25,1) both;
}
.fim-rest {
  display: inline-block;
  opacity: 0;
  font-weight: 800;
  animation: msg-rise .5s ease .28s both;
}
@keyframes msg-pop {
  0% { opacity: 0; transform: scale(.8); }
  55% { opacity: 1; transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes msg-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── Reveal de derrota ───────────────────────────────
   Equivalente sereno à vitória: mesma entrada do card, mas com um
   "respiro" teal suave (sem confete, sem brilhos) e a palavra do dia
   revelada com destaque, para o jogador perceber a resposta. */
.card-vitoria.is-loss {
  animation: card-pop .6s cubic-bezier(.2,.9,.25,1) both,
             card-glow-soft 2.2s ease .3s 1 both;
}
@keyframes card-glow-soft {
  0% { box-shadow: inset 0 0 0 0 rgba(58,114,114,0); }
  45% { box-shadow: inset 0 0 22px 2px rgba(58,114,114,.16); }
  100% { box-shadow: inset 0 0 0 0 rgba(58,114,114,0); }
}
/* "Não foi hoje." entra com pop suave; o resto sobe a seguir (reusa .fim-rest) */
.fim-nao {
  display: inline-block;
  color: var(--ink-soft);
  font-weight: 800;
  animation: msg-pop .5s cubic-bezier(.2,.85,.25,1) both;
}
/* A palavra do dia: revelada com leve destaque, logo após a frase subir */
.fim-word {
  display: inline-block;
  color: var(--teal-700);
  animation: word-reveal .6s ease .5s both;
}
@keyframes word-reveal {
  0% { opacity: 0; transform: scale(.85); letter-spacing: .12em; }
  60% { opacity: 1; transform: scale(1.06); }
  100% { transform: scale(1); letter-spacing: normal; }
}

/* ─── Scrollbar do modal (discreta, na paleta) ──────── */
.modal, #fim-content, #modal-como .modal-body, #modal-stats-header #stats-content {
  scrollbar-width: thin;
  scrollbar-color: var(--teal-300) transparent;
}
.modal::-webkit-scrollbar,
#fim-content::-webkit-scrollbar,
#modal-como .modal-body::-webkit-scrollbar,
#modal-stats-header #stats-content::-webkit-scrollbar { width: 8px; }
.modal::-webkit-scrollbar-track,
#fim-content::-webkit-scrollbar-track,
#modal-como .modal-body::-webkit-scrollbar-track,
#modal-stats-header #stats-content::-webkit-scrollbar-track { background: transparent; }
.modal::-webkit-scrollbar-thumb,
#fim-content::-webkit-scrollbar-thumb,
#modal-como .modal-body::-webkit-scrollbar-thumb,
#modal-stats-header #stats-content::-webkit-scrollbar-thumb {
  background: var(--teal-200);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.modal::-webkit-scrollbar-thumb:hover,
#fim-content::-webkit-scrollbar-thumb:hover,
#modal-como .modal-body::-webkit-scrollbar-thumb:hover,
#modal-stats-header #stats-content::-webkit-scrollbar-thumb:hover {
  background: var(--teal-300);
  background-clip: padding-box;
}

@media (prefers-reduced-motion: reduce) {
  .card-vitoria.is-win,
  .card-vitoria.is-loss { animation: none; border-color: transparent; }
  .card-vitoria.is-win::after { display: none; }
  .card-spark, .fim-burst { display: none; }
  .fim-boa, .fim-rest, .fim-nao, .fim-word { animation: none; opacity: 1; }
}