/* ============================================================
jogos.css — componentes comuns a todas as páginas de jogo
Assembleia de Deus Ministério Rochedo — rochedo.online
Criado em 18/08/2026 (Etapa 2 do padrão visual dos jogos)
Carregar SEMPRE depois do style.css:
Este arquivo é o dono dos componentes que antes estavam
copiados dentro de cada HTML de jogo. Nenhuma página deve
redefinir botão, alternativa, card de nível ou rodapé.
Todas as cores vêm das variáveis do style.css. Nenhuma cor
nova é inventada aqui, exceto --assin (cor de assinatura),
que cada jogo escolhe entre as cores que o site já tem.
============================================================ */
/* ---------- 1. Base da página de jogo -------------------- */
/* Aplicar a classe .jg no de toda página de jogo. */
.jg{
--assin: var(--orange); /* cor de assinatura, trocada por jogo */
background: var(--black);
color: var(--white);
font-family: var(--font-body);
padding-top: 65px; /* altura do menu fixo do site */
min-height: 100vh;
display: flex;
flex-direction: column;
-webkit-tap-highlight-color: transparent;
}
/* Cores de assinatura, aprovadas em 18/08/2026.
Usar SOMENTE em tarja, borda de item ativo e traço de título.
Nunca no fundo da página, nunca no botão principal. */
.jg--espada { --assin: var(--orange); } /* #FF5000 */
.jg--enem { --assin: var(--forest); } /* #59693A */
.jg--milhao { --assin: var(--gold); } /* #D4AF37 */
.jg--dossie { --assin: var(--orange-dim); } /* #D44200 */
.jg--seteerros { --assin: #A8862A; }
.jg--linha { --assin: var(--muted); } /* #C4B3A2 */
.jg--trilha { --assin: var(--forest); } /* #59693A */
/* O jogo esconde o cabeçalho e o rodapé próprios do site,
ficando só com o menu (nav.nav) e o rodapé .jogo-nav. */
.jg header{ display: none !important; }
.jg footer:not(.jogo-nav){ display: none !important; }
/* Área útil do jogo */
.jg-wrap{
width: 100%;
max-width: 760px;
margin: 0 auto;
padding: 28px 18px 40px;
flex: 1 0 auto;
}
.jg-wrap--largo{ max-width: 1000px; }
/* Proteção do menu do site.
O botão "Área do Membro" do menu usa a classe .btn, e vários
jogos redefinem .btn para largura total. Estas regras têm
especificidade maior e devolvem o menu ao formato correto,
independentemente da ordem em que os arquivos são carregados. */
nav.nav a.btn,
nav.nav .nav__cta{
display: inline-flex;
width: auto;
padding: 13px 24px;
font-size: 14px;
font-weight: 600;
line-height: 1.2;
border-radius: var(--radius);
background: var(--orange);
color: var(--white);
}
nav.nav .nav__links > li > a{ white-space: nowrap; }
/* ---------- 2. Cabeçalho do jogo ------------------------- */
/* Reaproveita .eyebrow, .section-title e .divider do site. */
.jg-hero{ margin-bottom: 26px; }
.jg-hero .eyebrow{ color: var(--assin); }
.jg-hero .divider{ background: var(--assin); }
.jg-hero__sub{
color: var(--muted);
max-width: 58ch;
margin: 12px 0 0;
}
/* Tarja fina de assinatura, opcional, no topo do painel */
.jg-tarja{
height: 3px;
background: var(--assin);
border-radius: 2px;
margin-bottom: 18px;
}
/* ---------- 3. Painel ------------------------------------ */
.jg-painel{
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px;
margin-bottom: 18px;
}
.jg-painel--escuro{ background: var(--dark); }
.jg-painel__titulo{
font-family: var(--font-head);
font-size: 20px;
font-weight: 700;
margin: 0 0 6px;
}
.jg-painel__nota{
color: var(--muted);
font-size: 14px;
margin: 0 0 16px;
}
/* ---------- 4. Rótulos e campos -------------------------- */
.jg-label{
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 8px;
}
.jg-campo{
width: 100%;
padding: 13px 15px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--dark);
color: var(--white);
font-family: var(--font-body);
font-size: 15px;
transition: border-color .15s;
}
.jg-campo::placeholder{ color: var(--muted); opacity: .8; }
.jg-campo:focus{ outline: none; border-color: var(--orange); }
/* ---------- 5. Botões ------------------------------------ */
/* .btn, .btn--primary e .btn--outline vêm do style.css. */
/* Aqui só o que falta para os jogos. */
.btn{ font-family: var(--font-body); justify-content: center; }
.btn--bloco{ display: flex; width: 100%; }
.btn--ouro{ background: var(--gold); color: var(--black); }
.btn--ouro:hover{ filter: brightness(1.07); }
.btn--pequeno{ padding: 9px 16px; font-size: 13px; }
.btn:disabled,
.btn[disabled]{ opacity: .45; cursor: not-allowed; }
.btn:disabled:hover,
.btn[disabled]:hover{ background: var(--orange); }
.btn--outline:disabled:hover,
.btn--outline[disabled]:hover{ background: transparent; }
.jg-botoes{ display: flex; flex-wrap: wrap; gap: 10px; }
.jg-botoes > .btn{ flex: 1 1 auto; }
/* ---------- 6. Cards de escolha (nível, categoria) ------- */
.jg-escolhas{ display: grid; gap: 10px; }
.jg-escolhas--2{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.jg-escolha{
display: block;
width: 100%;
text-align: left;
padding: 15px 17px;
background: var(--dark);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--white);
font-family: var(--font-body);
cursor: pointer;
transition: border-color .15s, background .15s;
}
.jg-escolha:hover{ border-color: var(--assin); }
.jg-escolha.ativo{
border-color: var(--assin);
box-shadow: inset 3px 0 0 var(--assin);
}
.jg-escolha__nome{ font-weight: 700; font-size: 15px; }
.jg-escolha__desc{ color: var(--muted); font-size: 13px; margin-top: 3px; }
.jg-escolha:disabled{ opacity: .4; cursor: not-allowed; }
.jg-escolha:disabled:hover{ border-color: var(--border); }
/* ---------- 7. Alternativas de resposta ------------------ */
/* Mesmo desenho para 4 alternativas e para as 5 do ENEM. */
.jg-alts{ margin: 0; padding: 0; list-style: none; }
.jg-alt{
display: flex;
align-items: flex-start;
gap: 12px;
width: 100%;
text-align: left;
padding: 13px 15px;
margin-bottom: 9px;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--white);
font-family: var(--font-body);
font-size: 15px;
line-height: 1.5;
cursor: pointer;
transition: border-color .13s, background .13s;
}
.jg-alt:hover:not([disabled]){ border-color: var(--orange); }
.jg-alt__letra{
flex: 0 0 28px;
height: 28px;
display: grid;
place-items: center;
border-radius: 4px;
background: var(--dark);
color: var(--muted);
font-weight: 800;
font-size: 13px;
transition: background .13s, color .13s;
}
.jg-alt.sel{ border-color: var(--orange); background: rgba(255,80,0,.12); }
.jg-alt.sel .jg-alt__letra{ background: var(--orange); color: #fff; }
.jg-alt.certa{ border-color: var(--ok); background: rgba(34,197,94,.12); }
.jg-alt.certa .jg-alt__letra{ background: var(--ok); color: #08240f; }
.jg-alt.errada{ border-color: var(--erro); background: rgba(239,68,68,.12); }
.jg-alt.errada .jg-alt__letra{ background: var(--erro); color: #fff; }
.jg-alt[disabled]{ cursor: default; }
.jg-alt.riscada .jg-alt__texto{ text-decoration: line-through; opacity: .45; }
/* ---------- 8. Enunciado e texto-base -------------------- */
.jg-pergunta{
font-size: 17px;
font-weight: 600;
line-height: 1.5;
margin: 0 0 16px;
}
.jg-base{
background: var(--dark);
border-left: 3px solid var(--assin);
border-radius: 0 var(--radius) var(--radius) 0;
padding: 14px 16px;
margin: 0 0 16px;
font-size: 15px;
line-height: 1.6;
}
.jg-base__fonte{
display: block;
margin-top: 8px;
font-size: 12px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--muted);
}
/* ---------- 9. Retorno de acerto e erro ------------------ */
/* Sem emojis: o estado é dito por palavra e por cor. */
.jg-feedback{
display: none;
padding: 13px 15px;
border-radius: var(--radius);
border: 1px solid var(--border);
margin-top: 12px;
font-size: 14px;
line-height: 1.55;
}
.jg-feedback.mostrar{ display: block; }
.jg-feedback__marca{
display: inline-block;
margin-right: 8px;
font-size: 12px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
.jg-feedback--certo{ border-color: var(--ok); background: rgba(34,197,94,.10); }
.jg-feedback--certo .jg-feedback__marca{ color: var(--ok); }
.jg-feedback--errado{ border-color: var(--erro); background: rgba(239,68,68,.10); }
.jg-feedback--errado .jg-feedback__marca{ color: var(--erro); }
/* ---------- 10. Barra de progresso ----------------------- */
.jg-progresso{
height: 6px;
background: var(--dark);
border: 1px solid var(--border);
border-radius: 99px;
overflow: hidden;
}
.jg-progresso__barra{
height: 100%;
width: 0;
background: var(--orange);
transition: width .3s;
}
.jg-progresso__rotulo{
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--muted);
margin-bottom: 6px;
}
/* ---------- 11. Placar, chips e cronômetro --------------- */
.jg-placar{
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 18px;
}
.jg-placar__item{
flex: 1 1 90px;
background: var(--dark);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 11px 13px;
text-align: center;
}
.jg-placar__num{
font-family: var(--font-head);
font-size: 22px;
font-weight: 700;
line-height: 1.1;
}
.jg-placar__num--ouro{ color: var(--gold); }
.jg-placar__num--ok{ color: var(--ok); }
.jg-placar__num--erro{ color: var(--erro); }
.jg-placar__rot{
font-size: 10px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--muted);
margin-top: 4px;
}
.jg-chip{
display: inline-block;
padding: 3px 10px;
border: 1px solid var(--border);
border-radius: 99px;
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
}
.jg-chip--assin{ color: var(--assin); border-color: var(--assin); }
.jg-cronometro{
font-family: var(--font-head);
font-size: 20px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.jg-cronometro.acabando{ color: var(--erro); }
/* ---------- 12. Resultado -------------------------------- */
.jg-resultado{ text-align: center; }
.jg-resultado__nota{
font-family: var(--font-head);
font-size: 56px;
font-weight: 800;
line-height: 1;
}
.jg-resultado__nota--ouro{ color: var(--gold); }
.jg-resultado__nota--ok{ color: var(--ok); }
.jg-resultado__nota--erro{ color: var(--erro); }
.jg-resultado__rotulo{
font-family: var(--font-head);
font-size: 18px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
margin: 10px 0 6px;
}
.jg-resultado__msg{
color: var(--muted);
max-width: 46ch;
margin: 0 auto 20px;
}
/* Caixa de colocação. Mostra APENAS a posição do próprio
participante — nunca o nome dos demais. */
.jg-rank{
background: var(--dark);
border: 1px solid var(--gold);
border-radius: var(--radius);
padding: 16px;
margin: 18px 0;
text-align: center;
}
.jg-rank__pos{
font-family: var(--font-head);
font-size: 30px;
font-weight: 800;
color: var(--gold);
line-height: 1.1;
}
.jg-rank__txt{ font-size: 13px; color: var(--muted); margin-top: 4px; }
/* ---------- 13. Rodapé de navegação do jogo -------------- */
/* Único rodapé permitido nas páginas de jogo. */
.jogo-nav{
flex-shrink: 0;
background: var(--dark);
border-top: 1px solid var(--border);
padding: 18px 16px 22px;
margin-top: auto;
}
.jogo-nav__row{
max-width: 760px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.jogo-nav__btn{
flex: 1 1 auto;
min-width: 140px;
text-align: center;
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--card-bg);
color: var(--white);
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: border-color .15s, color .15s;
}
.jogo-nav__btn:hover{ border-color: var(--orange); color: var(--orange); }
.jogo-nav__copy{
max-width: 760px;
margin: 12px auto 0;
text-align: center;
color: var(--muted);
font-size: 12px;
}
.jogo-nav__credito{
max-width: 760px;
margin: 6px auto 0;
text-align: center;
color: var(--muted);
font-size: 11px;
opacity: .8;
}
/* ---------- 14. Telas ------------------------------------ */
/* Padrão de troca de tela usado pelos jogos. */
.jg-tela{ display: none; }
.jg-tela.ativa{ display: block; }
/* ---------- 15. Celular ---------------------------------- */
@media (max-width: 560px){
.jg-wrap{ padding: 20px 14px 32px; }
.jg-painel{ padding: 18px 16px; }
.jg-alt{ font-size: 14px; padding: 12px 13px; }
.jg-resultado__nota{ font-size: 46px; }
.jogo-nav__btn{ min-width: 128px; font-size: 13px; }
.jg-placar__item{ flex: 1 1 72px; padding: 9px 8px; }
.jg-placar__num{ font-size: 19px; }
}
/* Espaço extra quando a barra de aplicativo do celular está
ativa (classe ro-has-appbar no , ver app-bar.js). */
.ro-has-appbar .jogo-nav{ padding-bottom: 78px; }
/* ---------- 16. Modo aplicativo no celular --------------- */
/* No modo aplicativo (membro logado, tela até 768px) o style.css
esconde o menu fixo do site e o app-bar.js insere no lugar dele
um cabeçalho próprio, com a seta de voltar e o nome da página.
Esse cabeçalho é o PRIMEIRO elemento do body.
Só que toda página de jogo reserva 65px de padding no topo do
body para o menu fixo — menu que ali nem existe. O resultado é
uma faixa vazia empurrando o cabeçalho do aplicativo para baixo.
Estas regras zeram essa reserva. O padding-bottom do body (a
reserva da barra de abas de baixo) NÃO é tocado. */
@media (max-width: 768px){
html.ro-has-appbar body{ padding-top: 0 !important; }
}