/* =========================================================================
Quiz Objetivo — CSS autossuficiente (sem Bootstrap, sem build).
Servido direto pelo sprockets; ver app/assets/config/manifest.js.
========================================================================= */
:root {
--q-bg: #0f172a;
--q-bg-alt: #16213c;
--q-card: #1e293b;
--q-card-2: #273549;
--q-borda: #334155;
--q-txt: #e2e8f0;
--q-txt-fraco:#94a3b8;
--q-acento: #a78bfa;
--q-acento-2: #7c3aed;
--q-ok: #22c55e;
--q-ok-fundo: #14532d;
--q-erro: #ef4444;
--q-erro-fundo:#4c1d24;
--q-aviso: #f59e0b;
--q-raio: 16px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
.q-body {
background: var(--q-bg);
color: var(--q-txt);
min-height: 100dvh;
font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
overscroll-behavior: contain; /* pull-to-refresh não mata a partida */
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
}
.q-app {
max-width: 560px;
margin: 0 auto;
padding: 20px 16px calc(24px + env(safe-area-inset-bottom));
min-height: 100dvh;
display: flex;
flex-direction: column;
/* Nenhuma fórmula larga pode fazer a página rolar na horizontal. */
overflow-x: hidden;
}
.q-tela { animation: q-entra .28s ease both; flex: 1; }
.q-tela[hidden] { display: none; }
.q-tela--centro { display: flex; flex-direction: column; justify-content: center; text-align: center; gap: 8px; }
.q-tela--jogo { display: flex; flex-direction: column; }
/* ---------------- Tipografia e blocos base ---------------- */
h1, h2, h3 { margin: 0 0 8px; line-height: 1.25; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1rem; }
.q-rotulo {
margin: 22px 0 6px;
font-size: .78rem;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--q-txt-fraco);
}
.q-ajuda { margin: 0 0 12px; font-size: .85rem; color: var(--q-txt-fraco); }
.q-ajuda--privacidade { text-align: left; font-size: .78rem; line-height: 1.45; }
.q-erro {
margin: 10px 0 0;
padding: 10px 12px;
border-radius: 10px;
background: var(--q-erro-fundo);
color: #fecaca;
font-size: .9rem;
}
.q-cabecalho { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.q-voltar, .q-sair, .q-som {
background: transparent; border: 0; color: var(--q-txt-fraco);
font-size: 1.4rem; line-height: 1; cursor: pointer;
min-width: 44px; min-height: 44px;
touch-action: manipulation;
}
.q-som { position: absolute; top: 14px; right: 14px; font-size: 1.25rem; }
.q-som.is-mudo { opacity: .35; }
/* No rodapé do mapa os interruptores entram na fila, sem sair flutuando. */
.q-som--inline {
position: static;
flex: 0 0 auto;
min-width: 36px; min-height: 36px;
font-size: 1.05rem;
}
.q-som--inline[disabled] { opacity: .25; cursor: default; }
/* ---------------- Início ---------------- */
.q-hero__icone { font-size: 3.6rem; line-height: 1; }
.q-hero__titulo { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; }
.q-hero__sub { margin: 0; color: var(--q-txt-fraco); font-size: .9rem; }
.q-saudacao { margin: 4px 0 0; color: var(--q-txt-fraco); }
.q-recorde {
display: inline-flex; flex-direction: column; gap: 2px;
margin: 14px auto 6px; padding: 12px 26px;
background: var(--q-card); border: 1px solid var(--q-borda); border-radius: var(--q-raio);
}
.q-recorde__rotulo { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--q-txt-fraco); }
.q-recorde__valor { font-size: 1.8rem; font-weight: 800; color: var(--q-acento); }
/* ---------------- Botões ---------------- */
.q-btn {
display: block; width: 100%;
margin-top: 12px; padding: 17px 20px;
font-size: 1rem; font-weight: 800; letter-spacing: .04em;
border: 0; border-radius: 14px; cursor: pointer;
touch-action: manipulation; user-select: none; -webkit-user-select: none;
transition: transform .1s ease, filter .15s ease;
}
.q-btn:active { transform: scale(.98); }
.q-btn--principal { background: var(--q-acento-2); color: #fff; box-shadow: 0 4px 0 #5b21b6; }
.q-btn--principal:active { box-shadow: 0 2px 0 #5b21b6; }
.q-btn--fantasma { background: transparent; color: var(--q-txt-fraco); box-shadow: none; font-weight: 600; }
.q-btn[disabled] { opacity: .5; pointer-events: none; }
/* O display:block acima ganha do [hidden] do navegador: sem esta linha, botão
marcado como oculto no HTML continuaria aparecendo. */
.q-btn[hidden] { display: none; }
/* ---------------- Configuração ---------------- */
/* Fileira das disciplinas: cresce de lado e quebra em linhas, então cada
disciplina nova custa ~40px de largura e quase nada de altura. A escolhida
ganha a cor da disciplina para não restar dúvida sobre de onde as cartas vão
sair. */
.q-materias { display: flex; flex-wrap: wrap; gap: 8px; }
.q-materia {
display: inline-flex; align-items: center; gap: 7px;
padding: 9px 12px; min-height: 44px;
background: var(--q-card); color: var(--q-txt-fraco);
border: 2px solid var(--q-borda); border-radius: 999px;
font-size: .88rem; font-weight: 700;
cursor: pointer; touch-action: manipulation;
transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.q-materia.is-ativa {
border-color: var(--cor-materia, var(--q-acento));
background: var(--q-card-2);
color: var(--q-txt);
}
.q-materia__icone { font-size: 1.15rem; line-height: 1; }
.q-materia__qtd {
font-size: .72rem; font-weight: 600; font-variant-numeric: tabular-nums;
color: var(--q-txt-fraco);
background: rgba(255,255,255,.07); padding: 1px 7px; border-radius: 999px;
}
/* Painel dos assuntos da disciplina escolhida. Uma por vez: as outras ficam no
HTML, escondidas, guardando o que já foi marcado nelas. */
.q-assuntos { margin-top: 12px; }
.q-assuntos[hidden] { display: none; }
.q-assuntos__barra {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
margin-bottom: 8px;
}
.q-assuntos__contagem {
font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums;
color: var(--q-txt-fraco);
}
.q-assuntos__todos {
padding: 8px 12px; min-height: 36px;
background: transparent; color: var(--cor-materia, var(--q-acento));
border: 1px solid var(--q-borda); border-radius: 999px;
font-size: .78rem; font-weight: 700;
cursor: pointer; touch-action: manipulation;
}
.q-assuntos__todos:active { transform: scale(.97); }
.q-assuntos__vazio { margin: 10px 2px 0; font-size: .85rem; color: var(--q-txt-fraco); }
.q-assuntos__vazio[hidden] { display: none; }
.q-busca {
display: flex; align-items: center; gap: 8px;
margin-bottom: 8px; padding: 0 12px; min-height: 44px;
background: var(--q-card); border: 2px solid var(--q-borda); border-radius: 12px;
}
.q-busca:focus-within { border-color: var(--cor-materia, var(--q-acento)); }
.q-busca__icone { font-size: .95rem; line-height: 1; opacity: .7; }
.q-busca__campo {
flex: 1; min-width: 0;
background: transparent; border: 0; outline: none;
color: var(--q-txt); font: inherit; font-size: .92rem;
}
.q-busca__campo::placeholder { color: var(--q-txt-fraco); }
/* Uma coluna no celular; duas onde couber, para a lista longa caber na dobra
sem encolher o alvo do toque. */
.q-chips { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 460px) { .q-chips { grid-template-columns: 1fr 1fr; } }
.q-chip {
display: flex; align-items: center; gap: 10px;
padding: 12px 13px; min-height: 52px;
background: var(--q-card); color: var(--q-txt);
border: 2px solid var(--q-borda); border-radius: 13px;
font-size: .95rem; text-align: left; cursor: pointer;
touch-action: manipulation;
transition: border-color .15s ease, background .15s ease, opacity .15s ease;
}
/* O display:flex acima ganha do [hidden] do navegador: sem esta linha, o chip
descartado pela busca continuaria na tela. */
.q-chip[hidden] { display: none; }
.q-chip:not(.is-ativo) { opacity: .45; }
.q-chip.is-ativo { border-color: var(--cor-tema, var(--q-acento)); background: var(--q-card-2); }
.q-chip__icone { font-size: 1.3rem; }
.q-chip__nome { flex: 1; min-width: 0; font-weight: 600; }
.q-chip__qtd {
font-size: .75rem; color: var(--q-txt-fraco);
background: rgba(255,255,255,.06); padding: 2px 8px; border-radius: 999px;
}
.q-segmentado { display: flex; gap: 6px; padding: 5px; background: var(--q-card); border-radius: 13px; }
.q-seg {
flex: 1; padding: 12px 8px; min-height: 46px;
background: transparent; color: var(--q-txt-fraco);
border: 0; border-radius: 9px; font-size: .92rem; font-weight: 600;
cursor: pointer; touch-action: manipulation;
}
.q-seg.is-ativo { background: var(--q-acento-2); color: #fff; }
.q-opcoes { display: flex; gap: 8px; margin-top: 10px; }
.q-opcoes[hidden] { display: none; }
.q-opcao {
flex: 1; padding: 15px 6px; min-height: 54px;
background: var(--q-card); color: var(--q-txt);
border: 2px solid var(--q-borda); border-radius: 13px;
font-size: .92rem; font-weight: 600; cursor: pointer; touch-action: manipulation;
}
.q-opcao.is-ativo { border-color: var(--q-acento); background: var(--q-card-2); color: var(--q-acento); }
/* ---------------- HUD do jogo ---------------- */
.q-hud { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.q-hud .q-sair { align-self: flex-start; margin: -8px 0 -4px -10px; }
.q-progresso { height: 9px; background: var(--q-card); border-radius: 999px; overflow: hidden; }
.q-progresso__barra {
height: 100%; width: 0%;
background: linear-gradient(90deg, var(--q-acento-2), var(--q-acento));
border-radius: 999px; transition: width .35s cubic-bezier(.2,.7,.3,1);
}
.q-hud__stats { display: flex; align-items: center; justify-content: space-between; font-size: .88rem; }
.q-contador { color: var(--q-txt-fraco); font-variant-numeric: tabular-nums; }
.q-contador.is-urgente { color: var(--q-erro); font-weight: 700; animation: q-tempo 1s ease-in-out infinite; }
.q-sequencia { color: var(--q-aviso); font-weight: 700; }
.q-sequencia.is-pulsando { animation: q-chama .45s ease; }
.q-pontos { font-weight: 800; font-size: 1.05rem; color: var(--q-acento); font-variant-numeric: tabular-nums; }
/* ---------------- Carta com flip 3D ---------------- */
.q-carta3d { perspective: 1200px; margin-bottom: 16px; }
.q-carta3d__int {
position: relative;
transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
transition: transform .5s cubic-bezier(.2,.7,.3,1), height .5s cubic-bezier(.2,.7,.3,1);
will-change: transform;
}
.q-carta3d.is-virada .q-carta3d__int { transform: rotateY(180deg); }
.q-carta3d__face {
backface-visibility: hidden; -webkit-backface-visibility: hidden;
background: var(--q-card);
border: 1px solid var(--q-borda);
border-radius: var(--q-raio);
padding: 20px 18px;
min-height: 132px;
}
.q-carta3d__face--verso {
position: absolute; inset: 0;
transform: rotateY(180deg);
overflow-y: auto;
background: var(--q-card-2);
}
.q-tema-tag {
display: inline-block; margin-bottom: 10px;
font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
color: var(--cor-tema, var(--q-acento));
}
.q-enunciado { font-size: 1.1rem; line-height: 1.6; }
.q-enunciado p:first-child { margin-top: 0; }
.q-enunciado p:last-child { margin-bottom: 0; }
/* Matriz 3x3 e sistema sao mais largos que a tela de um celular estreito.
Sem isto o conteudo empurra a pagina inteira e as alternativas vazam
para fora da area visivel. O scroll fica dentro do proprio bloco. */
.q-enunciado, .q-explicacao, .q-revisao__enunciado, .q-revisao__explicacao {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.q-dica {
margin-top: 14px; padding: 8px 12px;
background: transparent; color: var(--q-aviso);
border: 1px dashed rgba(245,158,11,.45); border-radius: 10px;
font-size: .82rem; cursor: pointer; touch-action: manipulation;
}
.q-dica__texto { margin: 10px 0 0; font-size: .85rem; color: var(--q-aviso); }
.q-veredito { font-size: 1.15rem; font-weight: 800; margin-bottom: 10px; }
.q-veredito.is-ok { color: var(--q-ok); }
.q-veredito.is-nao { color: var(--q-erro); }
.q-explicacao { font-size: .95rem; line-height: 1.6; color: var(--q-txt); }
.q-explicacao p:first-child { margin-top: 0; }
/* ---------------- Alternativas ---------------- */
.q-alternativas { display: flex; flex-direction: column; gap: 10px; }
.q-alternativas[hidden] { display: none; }
.q-alt {
display: block; width: 100%;
min-height: 62px; padding: 15px 16px;
background: var(--q-card); color: var(--q-txt);
border: 2px solid var(--q-borda); border-radius: 14px;
font-size: 1.05rem; text-align: left; cursor: pointer;
touch-action: manipulation; user-select: none; -webkit-user-select: none;
transition: border-color .15s ease, background .15s ease, opacity .2s ease;
}
.q-alt:active { transform: scale(.985); }
.q-alt.is-correta { border-color: var(--q-ok); background: var(--q-ok-fundo); animation: q-acerto .5s ease; }
.q-alt.is-errada { border-color: var(--q-erro); background: var(--q-erro-fundo); animation: q-erro .45s ease; }
.q-alt.is-apagada { opacity: .35; }
.q-alternativas.is-travado .q-alt { pointer-events: none; }
/* ---------------- Teclado numérico ---------------- */
.q-numerico[hidden] { display: none; }
.q-visor {
min-height: 62px; margin-bottom: 12px; padding: 12px 16px;
background: var(--q-card); border: 2px solid var(--q-borda); border-radius: 14px;
font-size: 1.9rem; font-weight: 700; text-align: center;
font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
.q-visor.is-correta { border-color: var(--q-ok); background: var(--q-ok-fundo); animation: q-acerto .5s ease; }
.q-visor.is-errada { border-color: var(--q-erro); background: var(--q-erro-fundo); animation: q-erro .45s ease; }
.q-simbolos { display: flex; gap: 8px; margin-bottom: 8px; }
.q-simbolos[hidden] { display: none; }
.q-simbolo {
flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px;
min-height: 54px; padding: 8px 12px;
background: var(--q-card-2); color: var(--q-txt);
border: 1px solid var(--q-acento); border-radius: 12px;
cursor: pointer; touch-action: manipulation;
}
.q-simbolo:active { transform: scale(.96); }
.q-simbolo b { font-size: 1.6rem; line-height: 1; }
.q-simbolo span { font-size: .72rem; line-height: 1.25; color: var(--q-txt-fraco); text-align: left; }
.q-teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.q-tecla {
min-height: 58px; padding: 12px;
background: var(--q-card); color: var(--q-txt);
border: 1px solid var(--q-borda); border-radius: 12px;
font-size: 1.3rem; font-weight: 600; cursor: pointer; touch-action: manipulation;
}
.q-tecla:active { background: var(--q-card-2); transform: scale(.96); }
.q-tecla--aux { color: var(--q-txt-fraco); font-size: 1.1rem; }
.q-tecla--aux[aria-expanded="true"] { border-color: var(--q-acento); color: var(--q-txt); }
.q-continuar[hidden] { display: none; }
/* ---------------- Resultado ---------------- */
.q-resultado__topo { text-align: center; padding: 10px 0 6px; }
.q-resultado__emoji { font-size: 3.2rem; line-height: 1; }
.q-resultado__rotulo { margin: 6px 0 0; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--q-txt-fraco); }
.q-resultado__pontos { font-size: 3rem; font-weight: 800; color: var(--q-acento); font-variant-numeric: tabular-nums; }
.q-resultado__bonus { margin: 0; font-size: .9rem; color: var(--q-ok); font-weight: 600; }
.q-resultado__recorde { margin: 6px 0 0; font-weight: 800; color: var(--q-aviso); }
.q-placar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 18px 0 4px; }
.q-placar__item {
display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: 12px 4px; background: var(--q-card); border-radius: 12px;
}
.q-placar__item b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.q-placar__item span { font-size: .68rem; color: var(--q-txt-fraco); text-align: center; }
.q-revisao { display: flex; flex-direction: column; gap: 10px; }
.q-revisao__item {
padding: 14px 16px; background: var(--q-card);
border: 1px solid var(--q-borda); border-left: 4px solid var(--q-erro);
border-radius: 12px;
}
.q-revisao__tema { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--q-txt-fraco); }
.q-revisao__enunciado { margin: 6px 0; font-size: .95rem; }
.q-revisao__correta { font-size: .9rem; color: var(--q-ok); font-weight: 600; }
.q-revisao__explicacao { margin-top: 8px; font-size: .88rem; color: var(--q-txt-fraco); line-height: 1.55; }
/* ---------------- Campos ---------------- */
.q-campo { display: block; text-align: left; margin-top: 14px; }
.q-campo > span { display: block; margin-bottom: 6px; font-size: .82rem; color: var(--q-txt-fraco); }
.q-campo > span em { font-style: normal; opacity: .7; }
.q-campo input {
width: 100%; padding: 15px 14px;
background: var(--q-card); color: var(--q-txt);
border: 2px solid var(--q-borda); border-radius: 12px;
font-size: 1rem; /* < 16px faz o iOS dar zoom no foco */
}
.q-campo input:focus { outline: none; border-color: var(--q-acento); }
/* ---------------- Progresso / ranking ---------------- */
.q-dominio { display: flex; flex-direction: column; gap: 10px; }
.q-dominio__item { padding: 12px 14px; background: var(--q-card); border-radius: 12px; }
.q-dominio__topo { display: flex; justify-content: space-between; font-size: .9rem; margin-bottom: 7px; }
.q-dominio__pct { font-weight: 800; font-variant-numeric: tabular-nums; }
.q-dominio__barra { height: 8px; background: var(--q-bg-alt); border-radius: 999px; overflow: hidden; }
.q-dominio__preenchimento { height: 100%; border-radius: 999px; transition: width .5s ease; }
.q-partidas, .q-ranking { display: flex; flex-direction: column; gap: 8px; }
.q-linha {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px; background: var(--q-card); border-radius: 12px; font-size: .93rem;
}
.q-linha.is-eu { border: 1px solid var(--q-acento); background: var(--q-card-2); }
.q-linha__pos { width: 32px; font-weight: 800; color: var(--q-txt-fraco); font-variant-numeric: tabular-nums; }
.q-linha__nome { flex: 1; font-weight: 600; }
.q-linha__pontos { font-weight: 800; color: var(--q-acento); font-variant-numeric: tabular-nums; }
.q-linha__meta { font-size: .78rem; color: var(--q-txt-fraco); }
/* ---------------- Ranking: abas de período ---------------- */
.q-abas {
display: flex; gap: 6px; padding: 5px; margin-bottom: 14px;
background: var(--q-card); border-radius: 13px;
}
.q-aba {
flex: 1; padding: 9px 4px; border: 0; border-radius: 9px;
background: transparent; color: var(--q-txt-fraco);
font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer;
}
.q-aba.is-ativo { background: var(--q-acento-2); color: #fff; }
/* Na versao sem JS as abas sao links. */
a.q-aba { text-align: center; text-decoration: none; }
/* ---------------- Pódio ---------------- */
.q-podio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: end; margin-bottom: 12px; }
.q-podio[hidden] { display: none; }
.q-podio__lugar {
display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: 12px 6px 0; background: var(--q-card); border-radius: 12px 12px 0 0;
border: 1px solid transparent; border-bottom: 0; text-align: center; overflow: hidden;
}
.q-podio__lugar.is-p1 { padding-top: 18px; background: linear-gradient(180deg, #3b2f5e, var(--q-card)); }
.q-podio__lugar.is-eu { border-color: var(--q-acento); }
.q-podio__medalha { font-size: 1.5rem; line-height: 1; }
.q-podio__lugar.is-p1 .q-podio__medalha { font-size: 1.9rem; }
.q-podio__nome {
font-size: .8rem; font-weight: 700; max-width: 100%;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.q-podio__pontos { font-size: .9rem; font-weight: 800; color: var(--q-acento); font-variant-numeric: tabular-nums; }
.q-podio__base {
width: 100%; margin-top: 8px; padding: 5px 0;
background: var(--q-card-2); font-size: .72rem; font-weight: 800; color: var(--q-txt-fraco);
}
.q-podio__lugar.is-p1 .q-podio__base { padding: 12px 0; color: var(--q-aviso); }
.q-podio__lugar.is-p3 .q-podio__base { padding: 3px 0; }
/* ---------------- Minha posição / entrada no ranking ---------------- */
.q-minha-pos {
display: flex; align-items: center; gap: 10px; margin-top: 12px;
padding: 12px 14px; border: 1px solid var(--q-acento); border-radius: 12px;
background: var(--q-card-2);
}
.q-minha-pos[hidden] { display: none; }
.q-minha-pos__rotulo { flex: 1; font-size: .8rem; color: var(--q-txt-fraco); text-transform: uppercase; letter-spacing: .06em; }
.q-minha-pos__valor { font-size: 1.5rem; font-weight: 800; color: var(--q-acento); font-variant-numeric: tabular-nums; }
.q-minha-pos__meta { font-size: .78rem; color: var(--q-txt-fraco); }
.q-aviso-apelido {
margin-top: 12px; padding: 14px; border-radius: 12px;
background: var(--q-card); border: 1px dashed var(--q-aviso); text-align: center;
}
.q-aviso-apelido[hidden] { display: none; }
.q-aviso-apelido p { margin: 0 0 10px; font-size: .88rem; color: var(--q-txt-fraco); }
/* ---------------- Compartilhar / convite ---------------- */
.q-compartilhar { margin-top: 18px; }
.q-compartilhar[hidden] { display: none; }
.q-compartilhar__chamada { margin: 0 0 8px; font-size: .85rem; color: var(--q-txt-fraco); text-align: center; }
.q-compartilhar__nota { margin: 4px 0 0; font-size: .82rem; color: var(--q-ok); text-align: center; }
.q-compartilhar__nota[hidden] { display: none; }
.q-btn--zap { background: #25d366; color: #06340f; box-shadow: 0 4px 0 #128c3e; }
.q-btn--zap:active { box-shadow: 0 2px 0 #128c3e; }
/* ---------------- Desafio recebido por link ---------------- */
.q-desafio {
margin: 4px 0 6px; padding: 16px 14px; border-radius: var(--q-raio);
background: var(--q-card); border: 1px solid var(--q-acento);
}
.q-desafio__icone { font-size: 2rem; line-height: 1; }
.q-desafio__titulo { margin: 6px 0 2px; font-size: 1.05rem; }
.q-desafio__meta { margin: 0; font-size: .9rem; color: var(--q-txt-fraco); }
.q-desafio__meta strong { color: var(--q-acento); }
.q-desafio__chamada { margin: 8px 0 0; font-size: .85rem; color: var(--q-aviso); font-weight: 600; }
/* ---------------- Offline ---------------- */
.q-offline {
position: fixed; inset: auto 0 0 0; z-index: 40;
padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
background: var(--q-erro-fundo); border-top: 1px solid var(--q-erro);
text-align: center;
}
.q-offline[hidden] { display: none; }
.q-offline p { margin: 0 0 6px; font-weight: 600; }
/* Faixa da home: estado da conexão e da fila de partidas guardadas. */
.q-faixa {
margin: 0 0 10px; padding: 9px 12px; border-radius: 10px;
background: var(--q-card-2); border: 1px solid var(--q-borda);
font-size: .82rem; font-weight: 600; color: var(--q-txt-fraco);
text-align: center;
}
.q-faixa[hidden] { display: none; }
/* Selo no HUD enquanto a partida corre sem rede. */
.q-selo-offline { font-size: .95rem; line-height: 1; opacity: .85; }
.q-selo-offline[hidden] { display: none; }
/* Aviso na tela de resultado: a partida ainda não subiu. */
.q-resultado__offline {
margin: 10px auto 0; max-width: 32ch; padding: 9px 12px; border-radius: 10px;
background: var(--q-card-2); border: 1px solid var(--q-borda);
font-size: .82rem; line-height: 1.5; color: var(--q-txt-fraco);
}
.q-resultado__offline[hidden] { display: none; }
/* ---------------- Confete ---------------- */
.q-confete { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.q-confete i {
position: absolute; top: -12vh; left: var(--x, 50%);
width: 9px; height: 14px; border-radius: 2px;
background: var(--c, #a78bfa);
animation: q-confete var(--dur, 1.5s) linear var(--atraso, 0s) forwards;
}
/* =========================================================================
INSTALAÇÃO NO CELULAR E LEMBRETES — convite da home e tela de ajustes.
========================================================================= */
/* O ⚙️ divide o canto de cima com o 🔊. */
.q-som--ajustes { right: 56px; }
/* ---------------- Convite para instalar (tela inicial) ---------------- */
.q-nudge {
position: relative;
margin-top: 18px; padding: 16px 14px;
background: var(--q-card); border: 1px dashed var(--q-acento); border-radius: var(--q-raio);
}
.q-nudge[hidden] { display: none; }
.q-nudge__icone { font-size: 1.8rem; line-height: 1; }
.q-nudge__texto { margin: 6px 0 12px; font-size: .87rem; line-height: 1.5; }
.q-nudge__acao {
width: 100%; padding: 11px 12px; border: 0; border-radius: 11px;
background: var(--q-acento-2); color: #fff;
font: inherit; font-size: .85rem; font-weight: 800; letter-spacing: .03em;
cursor: pointer; touch-action: manipulation;
}
.q-nudge__fechar {
position: absolute; top: 2px; right: 2px;
min-width: 34px; min-height: 34px;
background: transparent; border: 0; color: var(--q-txt-fraco);
font-size: .9rem; cursor: pointer;
}
/* ---------------- Cartões da tela de configurações ---------------- */
.q-cartao {
margin-bottom: 14px; padding: 16px 14px;
background: var(--q-card); border: 1px solid var(--q-borda); border-radius: var(--q-raio);
}
.q-cartao__titulo { margin: 0 0 8px; font-size: 1.02rem; }
.q-cartao__texto { margin: 0 0 12px; font-size: .88rem; line-height: 1.55; color: var(--q-txt-fraco); }
.q-cartao__texto strong { color: var(--q-txt); }
.q-cartao__ok {
margin: 0 0 12px; padding: 10px 12px; border-radius: 10px;
background: var(--q-ok-fundo); color: #bbf7d0; font-size: .86rem; font-weight: 600;
}
.q-cartao__ok[hidden] { display: none; }
/* Estado dos lembretes: aviso enquanto falta algo, verde quando está ligado. */
.q-cartao__aviso { margin: 8px 0 0; font-size: .84rem; line-height: 1.5; color: var(--q-aviso); }
.q-cartao__aviso.is-ok { color: var(--q-ok); }
.q-cartao__aviso.is-erro { color: var(--q-erro); }
/* ---------------- Turma (Configurações) ----------------
A lista de turmas em que o aluno está, com o botão de sair ao lado de cada
uma. Ela existe porque um menor cujos dados um professor e um pai leem tem
de conseguir ver isso -- e desfazer -- na própria tela. */
.q-turmas { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.q-turma {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 10px 12px; border-radius: 10px; background: var(--q-cartao-fundo, rgba(255,255,255,.04));
}
.q-turma__dados { display: grid; gap: 2px; min-width: 0; }
.q-turma__dados b { font-size: .95rem; }
.q-turma__dados span { font-size: .78rem; color: var(--q-txt-fraco); }
.q-btn--curto { width: auto; flex: 0 0 auto; padding: 6px 14px; font-size: .8rem; margin: 0; }
.q-cartao__nota { margin: 10px 0 0; font-size: .78rem; line-height: 1.5; color: var(--q-txt-fraco); }
.q-cartao__nota[hidden] { display: none; }
#passos-instalar[hidden] { display: none; }
/* ---------------- Passo a passo da instalação ---------------- */
.q-passos {
margin: 0; padding: 0 0 0 22px;
font-size: .88rem; line-height: 1.6;
}
.q-passos[hidden] { display: none; }
.q-passos li { margin-bottom: 9px; }
.q-passos li::marker { color: var(--q-acento); font-weight: 800; }
.q-passos strong { color: #fff; }
.q-passos__icone {
display: inline-block; padding: 0 6px; border-radius: 6px;
background: var(--q-card-2); font-size: .9em;
}
/* ---------------- Interruptor dos lembretes ---------------- */
.q-switch {
display: flex; align-items: center; gap: 12px;
padding: 4px 0; cursor: pointer;
user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.q-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.q-switch__trilho {
position: relative; flex: 0 0 auto;
width: 52px; height: 30px; border-radius: 999px;
background: var(--q-card-2); border: 1px solid var(--q-borda);
transition: background .18s ease, border-color .18s ease;
}
.q-switch__bola {
position: absolute; top: 3px; left: 3px;
width: 22px; height: 22px; border-radius: 50%;
background: var(--q-txt-fraco);
transition: transform .18s ease, background .18s ease;
}
.q-switch input:checked + .q-switch__trilho { background: var(--q-ok); border-color: var(--q-ok); }
.q-switch input:checked + .q-switch__trilho .q-switch__bola { transform: translateX(22px); background: #fff; }
.q-switch input:focus-visible + .q-switch__trilho { outline: 2px solid var(--q-acento); outline-offset: 2px; }
.q-switch input:disabled + .q-switch__trilho { opacity: .4; }
.q-switch input:disabled ~ .q-switch__rotulo { color: var(--q-txt-fraco); }
.q-switch__rotulo { font-size: .92rem; font-weight: 600; }
/* ---------------- Horários dos lembretes ---------------- */
.q-horarios {
margin: 14px 0 0; padding: 12px 14px; list-style: none;
background: var(--q-bg-alt); border-radius: 12px;
font-size: .84rem; color: var(--q-txt-fraco);
}
.q-horarios li { display: flex; gap: 10px; padding: 4px 0; }
.q-horarios b {
flex: 0 0 auto; min-width: 44px;
color: var(--q-acento); font-variant-numeric: tabular-nums;
}
/* =========================================================================
MODO TRILHA — mapa de fases, avatar e painel da fase.
Referência de leitura de mapa é o Super Mario World: caminho pontilhado
subindo, nodes redondos, o herói parado na fase da vez. O acabamento é
atual — gradiente suave, cantos generosos, nada de pixel art.
========================================================================= */
/* ---------------- Botão de entrada na home ---------------- */
.q-btn--trilha {
position: relative;
background: linear-gradient(135deg, #16a34a, #0ea5e9);
color: #fff; box-shadow: 0 4px 0 #075985;
}
.q-btn--trilha:active { box-shadow: 0 2px 0 #075985; }
.q-explica {
padding: 14px 16px; margin-top: 4px;
background: var(--q-card); border: 1px solid var(--q-borda); border-radius: var(--q-raio);
font-size: .9rem;
}
.q-explica p { margin: 0 0 8px; }
.q-explica p:last-child { margin-bottom: 0; }
.q-explica__nota { color: var(--q-txt-fraco); font-size: .82rem; }
/* ---------------- Boneco (avatar 2D) ---------------- */
.q-boneco {
position: relative;
display: inline-block;
width: 46px; line-height: 0;
}
.q-boneco svg { width: 100%; height: auto; display: block; overflow: visible; }
.q-boneco--mini { width: 30px; }
.q-boneco--linha { width: 26px; flex: 0 0 auto; }
.q-boneco--node { width: 22px; }
.q-boneco--heroi { width: 100%; }
/* Foguinho da frequência diária: fica preso ao ombro do boneco. Nasce pequeno
(o boneco do mapa tem 44px) e cresce só no editor, onde há espaço. */
.q-fogo {
position: absolute; top: -4%; right: -30%;
display: inline-flex; align-items: center; gap: 1px;
padding: 0 4px 0 2px;
background: linear-gradient(160deg, #f97316, #dc2626);
border-radius: 999px;
font-size: .46rem; line-height: 1.6; font-weight: 800; color: #fff;
box-shadow: 0 1px 4px rgba(220, 38, 38, .55);
animation: q-chama 1.6s ease-in-out infinite;
}
.q-fogo b { font-size: .55rem; }
/* No botão do topo o boneco é recortado: a chama ficaria pela metade. */
.q-avatar-botao .q-fogo { display: none; }
.q-fogo--btn {
position: static; margin-left: 6px; vertical-align: middle;
font-size: .72rem; padding: 2px 8px;
}
/* ---------------- Tela do mapa ---------------- */
.q-tela--trilha { display: flex; flex-direction: column; min-height: 0; }
.q-tela--trilha[hidden] { display: none; }
.q-mapa__topo {
display: flex; align-items: center; gap: 8px;
padding-bottom: 8px;
}
.q-mapa__info { flex: 1; display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
/* O cabeçalho tem muita coisa (voltar, estrelas, som, música, avatar): o nome
do estágio corta com reticências em vez de empurrar os botões para fora. */
.q-mapa__info b, .q-mapa__info span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-mapa__info b { font-size: 1rem; }
.q-mapa__info span { font-size: .75rem; color: var(--q-txt-fraco); }
.q-mapa__estrelas {
padding: 5px 11px; border-radius: 999px;
background: rgba(245, 158, 11, .16); color: #fcd34d;
font-size: .8rem; font-weight: 800; white-space: nowrap;
}
.q-avatar-botao {
flex: 0 0 auto;
width: 44px; height: 44px; padding: 3px;
display: flex; align-items: flex-end; justify-content: center;
background: var(--q-card); border: 2px solid var(--q-borda); border-radius: 12px;
cursor: pointer; overflow: hidden;
}
.q-avatar-botao .q-boneco { width: 26px; }
/* O mundo rola dentro desta janela; o resto da tela fica parado.
A altura precisa ser definida (e não flex:1): sem isso o contêiner cresceria
até o tamanho do mundo, quem rolaria seria a página e o mapa nunca
conseguiria se centralizar no herói. */
.q-mapa {
position: relative;
height: clamp(340px, calc(100dvh - 200px), 860px);
overflow-y: auto; overflow-x: hidden;
border-radius: 20px;
border: 2px solid rgba(148, 163, 184, .35);
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
/* O cenário vem das faixas de bioma (.q-bioma). Aqui fica só o fundo de
segurança, para o mapa nunca aparecer transparente enquanto carrega ou numa
trilha sem fases. */
.q-mundo {
position: relative;
background: linear-gradient(180deg, #0b1120, #0f172a);
}
/* ---------------- Cenário dos estágios ---------------- */
/* Cada trecho da trilha (um tema) tem seu cenário: floresta embaixo, depois
deserto, oceano, geleira, vulcão, céu estelar e espaço no topo.
Dentro de uma faixa o desenho é um tile de 440px que se repete: elementos
soltos no alto (nuvens, brasas, estrelas), dois montes na altura de 400px e
uma linha de chão. Repetir o tile — em vez de esticar um gradiente só — é o
que dá a sensação de mapa longo com terreno. */
.q-mundo__biomas { position: absolute; inset: 0; overflow: hidden; }
.q-bioma {
position: absolute; left: 0; right: 0;
overflow: hidden;
background-size: 100% 440px;
background-repeat: repeat-y;
}
/* Emenda entre um estágio e o outro: um escurecido curto no alto da faixa faz
o cenário de cima "descer" sobre o de baixo em vez de cortar reto. */
.q-bioma::before {
content: "";
position: absolute; inset: 0 0 auto;
height: 56px;
background: linear-gradient(180deg, rgba(2, 6, 23, .55), transparent);
}
.q-bioma__nome {
position: absolute; top: 9px; left: 50%;
transform: translateX(-50%);
padding: 2px 10px; border-radius: 999px;
background: rgba(2, 6, 23, .45);
font-size: .62rem; font-weight: 800; letter-spacing: .09em;
text-transform: uppercase; white-space: nowrap;
color: rgba(226, 232, 240, .78);
}
/* Floresta — céu azul, nuvens e morros verdes. */
.q-bioma--floresta {
background-color: #0c4a6e;
background-image:
radial-gradient(circle at 18% 62px, rgba(255, 255, 255, .14) 0 24px, transparent 25px),
radial-gradient(circle at 26% 74px, rgba(255, 255, 255, .14) 0 17px, transparent 18px),
radial-gradient(circle at 80% 176px, rgba(255, 255, 255, .11) 0 20px, transparent 21px),
radial-gradient(ellipse 130px 74px at 12% 402px, rgba(21, 128, 61, .75) 0 99%, transparent 100%),
radial-gradient(ellipse 168px 88px at 88% 400px, rgba(20, 83, 45, .7) 0 99%, transparent 100%),
linear-gradient(180deg, transparent 0 396px, rgba(34, 197, 94, .5) 396px 412px, rgba(20, 83, 45, .55) 412px 440px, transparent 440px),
linear-gradient(180deg, #0b2b5e 0%, #1249a3 38%, #0e7ec4 72%, #0ea5e9 100%);
}
/* Deserto — sol baixo e dunas de areia. */
.q-bioma--deserto {
background-color: #7c2d12;
background-image:
radial-gradient(circle at 76% 88px, rgba(254, 240, 138, .55) 0 26px, transparent 27px),
radial-gradient(circle at 76% 88px, rgba(253, 224, 71, .14) 0 54px, transparent 55px),
radial-gradient(ellipse 190px 66px at 10% 406px, rgba(217, 119, 6, .8) 0 99%, transparent 100%),
radial-gradient(ellipse 152px 54px at 86% 410px, rgba(154, 52, 18, .85) 0 99%, transparent 100%),
linear-gradient(180deg, transparent 0 398px, rgba(251, 191, 36, .55) 398px 414px, rgba(120, 53, 15, .65) 414px 440px, transparent 440px),
linear-gradient(180deg, #3f1508 0%, #9a3412 36%, #d97706 72%, #fbbf24 100%);
}
/* Oceano — fundo do mar, bolhas subindo e corais. */
.q-bioma--agua {
background-color: #082f49;
background-image:
radial-gradient(circle at 22% 122px, rgba(224, 242, 254, .22) 0 9px, transparent 10px),
radial-gradient(circle at 31% 78px, rgba(224, 242, 254, .16) 0 6px, transparent 7px),
radial-gradient(circle at 72% 168px, rgba(224, 242, 254, .18) 0 12px, transparent 13px),
radial-gradient(ellipse 140px 62px at 16% 410px, rgba(13, 148, 136, .7) 0 99%, transparent 100%),
radial-gradient(ellipse 176px 76px at 84% 406px, rgba(15, 118, 110, .75) 0 99%, transparent 100%),
linear-gradient(180deg, transparent 0 396px, rgba(45, 212, 191, .45) 396px 412px, rgba(19, 78, 74, .6) 412px 440px, transparent 440px),
linear-gradient(180deg, #041d2e 0%, #0b4a6f 40%, #0d7490 74%, #22b8cf 100%);
}
/* Geleira — neve caindo e montanhas de gelo. */
.q-bioma--gelo {
background-color: #164e63;
background-image:
radial-gradient(circle at 20% 96px, rgba(255, 255, 255, .5) 0 4px, transparent 5px),
radial-gradient(circle at 64% 58px, rgba(255, 255, 255, .4) 0 3px, transparent 4px),
radial-gradient(circle at 85% 152px, rgba(255, 255, 255, .45) 0 4px, transparent 5px),
radial-gradient(ellipse 120px 98px at 18% 414px, rgba(224, 242, 254, .8) 0 99%, transparent 100%),
radial-gradient(ellipse 152px 114px at 84% 416px, rgba(186, 230, 253, .68) 0 99%, transparent 100%),
linear-gradient(180deg, transparent 0 398px, rgba(248, 250, 252, .72) 398px 416px, rgba(125, 211, 252, .45) 416px 440px, transparent 440px),
linear-gradient(180deg, #0e2a44 0%, #1f5f86 40%, #4b9dc4 74%, #a8dcf2 100%);
}
/* Vulcão — brasas subindo e rio de lava. */
.q-bioma--fogo {
background-color: #450a0a;
background-image:
radial-gradient(circle at 24% 128px, rgba(251, 146, 60, .5) 0 5px, transparent 6px),
radial-gradient(circle at 58% 68px, rgba(248, 113, 113, .45) 0 4px, transparent 5px),
radial-gradient(circle at 80% 192px, rgba(251, 191, 36, .45) 0 6px, transparent 7px),
radial-gradient(ellipse 152px 82px at 14% 408px, rgba(69, 10, 10, .9) 0 99%, transparent 100%),
radial-gradient(ellipse 178px 94px at 86% 404px, rgba(28, 10, 10, .9) 0 99%, transparent 100%),
linear-gradient(180deg, transparent 0 396px, rgba(249, 115, 22, .78) 396px 410px, rgba(113, 20, 10, .8) 410px 440px, transparent 440px),
linear-gradient(180deg, #1a0505 0%, #7f1d1d 38%, #c2410c 74%, #f97316 100%);
}
/* Céu estelar — noite roxa com nebulosa. */
.q-bioma--estelar {
background-color: #1e1b4b;
background-image:
radial-gradient(circle at 16% 70px, rgba(255, 255, 255, .85) 0 2px, transparent 3px),
radial-gradient(circle at 44% 142px, rgba(255, 255, 255, .6) 0 2px, transparent 3px),
radial-gradient(circle at 78% 52px, rgba(255, 255, 255, .75) 0 2px, transparent 3px),
radial-gradient(ellipse 180px 122px at 74% 178px, rgba(217, 70, 239, .26) 0 99%, transparent 100%),
radial-gradient(ellipse 162px 96px at 18% 402px, rgba(76, 29, 149, .85) 0 99%, transparent 100%),
linear-gradient(180deg, transparent 0 398px, rgba(167, 139, 250, .45) 398px 412px, rgba(49, 26, 110, .75) 412px 440px, transparent 440px),
linear-gradient(180deg, #0a0720 0%, #2e1065 44%, #4c1d95 76%, #7c3aed 100%);
}
/* Espaço — fora da atmosfera: vazio, estrelas e um planeta ao longe. */
.q-bioma--espacial {
background-color: #020617;
background-image:
radial-gradient(circle at 12% 96px, rgba(255, 255, 255, .9) 0 2px, transparent 3px),
radial-gradient(circle at 52% 40px, rgba(255, 255, 255, .7) 0 2px, transparent 3px),
radial-gradient(circle at 88% 162px, rgba(255, 255, 255, .8) 0 2px, transparent 3px),
radial-gradient(circle at 82% 330px, rgba(56, 189, 248, .4) 0 38px, transparent 39px),
radial-gradient(ellipse 152px 72px at 16% 420px, rgba(100, 116, 139, .55) 0 99%, transparent 100%),
linear-gradient(180deg, transparent 0 402px, rgba(148, 163, 184, .38) 402px 414px, rgba(30, 41, 59, .8) 414px 440px, transparent 440px),
linear-gradient(180deg, #01030c 0%, #070b1f 44%, #101736 78%, #1e2a52 100%);
}
/* ---------------- Cenário em movimento ---------------- */
/* Cada faixa ganha duas camadas de partículas que se movem em velocidades
diferentes (nuvem passando, bolha subindo, neve caindo, brasa voando). É o
que tira o mapa da foto parada — o terreno continua fixo, só o "ar" anda.
O truque do laço sem emenda: a camada é um tile que se repete e o
deslocamento da animação é exatamente o tamanho do tile, então o quadro
final é idêntico ao inicial e o ciclo não pisca. */
.q-bioma__ar {
position: absolute; inset: 0;
overflow: hidden; pointer-events: none;
}
.q-bioma__ar::before, .q-bioma__ar::after {
content: "";
position: absolute; inset: -300px 0;
background-repeat: repeat;
}
/* Sobe (bolha, brasa) / desce (neve) / atravessa (nuvem, poeira). O tamanho do
passo casa com o background-size declarado em cada bioma. */
@keyframes q-ar-sobe { to { transform: translateY(-300px); } }
@keyframes q-ar-desce { to { transform: translateY(300px); } }
@keyframes q-ar-cruza { to { transform: translateX(300px); } }
@keyframes q-ar-pisca { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
/* Floresta: nuvens grandes atrás, nuvens pequenas na frente, indo para a direita. */
.q-bioma--floresta .q-bioma__ar::before {
background-image:
radial-gradient(ellipse 34px 13px at 60px 90px, rgba(255, 255, 255, .18) 0 99%, transparent 100%),
radial-gradient(ellipse 22px 10px at 210px 190px, rgba(255, 255, 255, .14) 0 99%, transparent 100%);
background-size: 300px 300px;
animation: q-ar-cruza 46s linear infinite;
}
.q-bioma--floresta .q-bioma__ar::after {
background-image: radial-gradient(ellipse 16px 7px at 140px 40px, rgba(255, 255, 255, .22) 0 99%, transparent 100%);
background-size: 300px 220px;
animation: q-ar-cruza 27s linear infinite;
}
/* Deserto: poeira fina levada pelo vento. */
.q-bioma--deserto .q-bioma__ar::before {
background-image:
radial-gradient(circle at 40px 120px, rgba(254, 240, 138, .3) 0 2px, transparent 3px),
radial-gradient(circle at 190px 60px, rgba(253, 230, 138, .26) 0 2px, transparent 3px),
radial-gradient(circle at 260px 230px, rgba(254, 243, 199, .22) 0 1px, transparent 2px);
background-size: 300px 300px;
animation: q-ar-cruza 12s linear infinite;
}
.q-bioma--deserto .q-bioma__ar::after {
background-image: radial-gradient(ellipse 60px 4px at 150px 170px, rgba(255, 237, 213, .16) 0 99%, transparent 100%);
background-size: 300px 260px;
animation: q-ar-cruza 20s linear infinite;
}
/* Oceano: bolhas subindo em duas correntes. */
.q-bioma--agua .q-bioma__ar::before {
background-image:
radial-gradient(circle at 55px 240px, rgba(224, 242, 254, .3) 0 5px, transparent 6px),
radial-gradient(circle at 230px 120px, rgba(224, 242, 254, .24) 0 7px, transparent 8px);
background-size: 300px 300px;
animation: q-ar-sobe 15s linear infinite;
}
.q-bioma--agua .q-bioma__ar::after {
background-image:
radial-gradient(circle at 140px 80px, rgba(224, 242, 254, .34) 0 3px, transparent 4px),
radial-gradient(circle at 280px 210px, rgba(224, 242, 254, .28) 0 2px, transparent 3px);
background-size: 300px 300px;
animation: q-ar-sobe 9s linear infinite;
}
/* Geleira: neve caindo — a camada da frente cai mais rápido. */
.q-bioma--gelo .q-bioma__ar::before {
background-image:
radial-gradient(circle at 40px 60px, rgba(255, 255, 255, .55) 0 3px, transparent 4px),
radial-gradient(circle at 170px 150px, rgba(255, 255, 255, .45) 0 2px, transparent 3px),
radial-gradient(circle at 265px 245px, rgba(255, 255, 255, .5) 0 3px, transparent 4px);
background-size: 300px 300px;
animation: q-ar-desce 17s linear infinite;
}
.q-bioma--gelo .q-bioma__ar::after {
background-image:
radial-gradient(circle at 100px 190px, rgba(255, 255, 255, .8) 0 2px, transparent 3px),
radial-gradient(circle at 240px 70px, rgba(255, 255, 255, .7) 0 2px, transparent 3px);
background-size: 300px 300px;
animation: q-ar-desce 8.5s linear infinite;
}
/* Vulcão: brasas subindo e piscando. */
.q-bioma--fogo .q-bioma__ar::before {
background-image:
radial-gradient(circle at 60px 250px, rgba(251, 146, 60, .6) 0 3px, transparent 4px),
radial-gradient(circle at 200px 140px, rgba(248, 113, 113, .5) 0 4px, transparent 5px),
radial-gradient(circle at 280px 40px, rgba(251, 191, 36, .45) 0 2px, transparent 3px);
background-size: 300px 300px;
animation: q-ar-sobe 11s linear infinite;
}
.q-bioma--fogo .q-bioma__ar::after {
background-image:
radial-gradient(circle at 130px 200px, rgba(254, 215, 170, .55) 0 2px, transparent 3px),
radial-gradient(circle at 30px 90px, rgba(251, 146, 60, .5) 0 2px, transparent 3px);
background-size: 300px 300px;
animation: q-ar-sobe 6.5s linear infinite;
}
/* Céu estelar: estrelas piscando por cima de uma nebulosa que passa devagar. */
.q-bioma--estelar .q-bioma__ar::before {
background-image:
radial-gradient(circle at 70px 90px, rgba(255, 255, 255, .9) 0 2px, transparent 3px),
radial-gradient(circle at 210px 200px, rgba(255, 255, 255, .75) 0 2px, transparent 3px),
radial-gradient(circle at 150px 260px, rgba(216, 180, 254, .8) 0 2px, transparent 3px);
background-size: 300px 300px;
animation: q-ar-pisca 3.6s ease-in-out infinite;
}
.q-bioma--estelar .q-bioma__ar::after {
background-image: radial-gradient(ellipse 90px 40px at 220px 120px, rgba(217, 70, 239, .16) 0 99%, transparent 100%);
background-size: 300px 300px;
animation: q-ar-cruza 60s linear infinite;
}
/* Espaço: poeira estelar descendo devagar — a sensação é de estar subindo. */
.q-bioma--espacial .q-bioma__ar::before {
background-image:
radial-gradient(circle at 50px 140px, rgba(255, 255, 255, .85) 0 2px, transparent 3px),
radial-gradient(circle at 240px 40px, rgba(255, 255, 255, .7) 0 1px, transparent 2px),
radial-gradient(circle at 160px 250px, rgba(186, 230, 253, .75) 0 2px, transparent 3px);
background-size: 300px 300px;
animation: q-ar-desce 34s linear infinite;
}
.q-bioma--espacial .q-bioma__ar::after {
background-image:
radial-gradient(circle at 110px 60px, rgba(255, 255, 255, .95) 0 1px, transparent 2px),
radial-gradient(circle at 285px 190px, rgba(255, 255, 255, .8) 0 2px, transparent 3px);
background-size: 300px 260px;
animation: q-ar-pisca 2.4s ease-in-out infinite;
}
/* A placa do estágio flutua de leve, como as do mapa do Mario. */
.q-bioma__nome { animation: q-placa 5s ease-in-out infinite; }
/* Textura de bloco por cima do céu — o "tile" do mapa. */
.q-mundo__ceu {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
background-size: 44px 44px;
pointer-events: none;
}
/* ---------------- Caminho pontilhado ---------------- */
.q-caminho { position: absolute; inset: 0; pointer-events: none; }
.q-passo {
position: absolute;
width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
border-radius: 50%;
background: rgba(15, 23, 42, .35);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
/* O trecho aberto acende em onda, uma bolinha depois da outra (o --atraso vem
do índice do passo): o caminho "corre" na direção da próxima fase. */
.q-passo.is-aberto {
background: #fbbf24; box-shadow: 0 0 8px rgba(251, 191, 36, .6);
animation: q-passo-onda 1.9s ease-in-out infinite;
animation-delay: var(--atraso, 0s);
}
/* ---------------- Nodes das fases ---------------- */
.q-node {
position: absolute;
transform: translate(-50%, -50%);
display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 0; border: 0; background: transparent;
cursor: pointer; touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.q-node__disco {
position: relative;
width: 58px; height: 58px;
display: flex; align-items: center; justify-content: center;
border-radius: 18px;
background: linear-gradient(160deg, var(--cor, #7c3aed), rgba(15, 23, 42, .85));
border: 3px solid rgba(255, 255, 255, .9);
box-shadow: 0 5px 0 rgba(2, 6, 23, .55), 0 8px 18px rgba(2, 6, 23, .35);
transition: transform .14s ease, box-shadow .14s ease;
}
.q-node:active .q-node__disco { transform: translateY(3px); box-shadow: 0 2px 0 rgba(2, 6, 23, .55); }
.q-node__icone { font-size: 1.6rem; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4)); }
.q-node__numero {
position: absolute; bottom: -7px; right: -7px;
min-width: 22px; padding: 1px 5px;
background: #0f172a; border: 2px solid rgba(255, 255, 255, .85); border-radius: 999px;
font-size: .68rem; font-weight: 800; color: #fff;
}
.q-node.is-travada .q-node__disco {
background: linear-gradient(160deg, #475569, #1e293b);
border-color: rgba(226, 232, 240, .35);
box-shadow: 0 4px 0 rgba(2, 6, 23, .5);
}
.q-node.is-travada .q-node__icone { opacity: .8; font-size: 1.3rem; }
.q-node.is-travada .q-node__numero { opacity: .6; }
/* Fase aberta e ainda não vencida pulsa de leve: é o convite para jogar. */
.q-node.is-aberta:not(.is-concluida) .q-node__disco { animation: q-node-pulso 2.4s ease-in-out infinite; }
.q-node.is-concluida .q-node__disco { border-color: #fcd34d; }
.q-node.is-chefe .q-node__disco { width: 66px; height: 66px; border-radius: 22px; }
.q-node.is-chefe .q-node__icone { font-size: 1.9rem; }
.q-node.is-negado { animation: q-erro .4s ease; }
/* Ícone da fase com vida própria: cada node balança no seu tempo (--atraso vem
do número da fase), senão o mapa inteiro pisca junto e parece um letreiro. */
.q-node__icone { animation: q-icone-bole 3.4s ease-in-out infinite; animation-delay: var(--atraso, 0s); }
.q-node.is-travada .q-node__icone { animation: none; }
/* Anel de luz na fase aberta ainda não vencida — o "vai aqui" do mapa. */
.q-node.is-aberta:not(.is-concluida) .q-node__disco::after {
content: "";
position: absolute; inset: -3px;
border-radius: inherit; border: 2px solid rgba(252, 211, 77, .9);
animation: q-node-anel 2.4s ease-out infinite;
pointer-events: none;
}
/* Fase do chefe respira mais forte: é o fim do estágio. */
.q-node.is-chefe.is-aberta .q-node__disco { animation-duration: 1.5s; }
/* Entrada na fase: o disco engole o herói e devolve um clarão. A classe
is-aberta entra no seletor só para ganhar do pulso, que tem o mesmo peso. */
.q-node.is-aberta.is-entrando .q-node__disco { animation: q-node-engole .42s ease-out; }
.q-estrelas { display: inline-flex; gap: 1px; }
/* No mapa as estrelas ficam sobre o céu: sem a pílula escura elas somem. */
.q-node .q-estrelas {
padding: 1px 6px; border-radius: 999px;
background: rgba(2, 6, 23, .45);
}
.q-estrela {
font-style: normal; font-size: .78rem; line-height: 1;
color: rgba(15, 23, 42, .45);
text-shadow: 0 1px 0 rgba(255, 255, 255, .18);
}
.q-estrela.is-cheia { color: #fcd34d; text-shadow: 0 0 6px rgba(252, 211, 77, .7); }
.q-estrelas--grande { display: flex; justify-content: center; gap: 6px; margin: 6px 0; }
.q-estrelas--grande .q-estrela { font-size: 2rem; }
/* Só na tela de resultado as estrelas entram caindo, uma a uma. */
.q-estrelas--premio .q-estrela.is-cheia { transform: scale(0); }
.q-estrelas--premio .q-estrela.is-cheia.is-ganha { animation: q-estrela-cai .45s cubic-bezier(.2, 1.5, .4, 1) forwards; }
/* Bonecos de quem já passou pela fase, parados ao lado do node. */
.q-node__povo {
position: absolute; left: 100%; top: 50%;
transform: translateY(-50%);
display: flex; align-items: flex-end; margin-left: 2px;
pointer-events: none;
}
/* Cada um balança no seu tempo: em bloco pareceria um só boneco duplicado. */
.q-node__povo .q-boneco {
margin-left: -9px; opacity: .95;
transform-origin: 50% 100%;
animation: q-parado 2.9s ease-in-out infinite;
}
.q-node__povo .q-boneco:nth-child(2) { animation-delay: -.7s; animation-duration: 3.3s; }
.q-node__povo .q-boneco:nth-child(3) { animation-delay: -1.4s; animation-duration: 2.5s; }
.q-node__povo .q-boneco:nth-child(4) { animation-delay: -2.1s; animation-duration: 3.7s; }
.q-node__povo .q-fogo { display: none; }
.q-node__mais {
align-self: center; margin-left: 2px; padding: 1px 5px;
background: rgba(15, 23, 42, .75); border-radius: 999px;
font-size: .6rem; font-weight: 700; color: #e2e8f0;
}
/* Node muito à direita joga a fila de bonecos para a esquerda. */
.q-node.is-direita .q-node__povo {
left: auto; right: 100%; margin: 0 2px 0 0; flex-direction: row-reverse;
}
/* ---------------- Herói ---------------- */
.q-heroi {
position: absolute;
/* 44px de largura => 66px de altura (viewBox 64x96). A margem negativa apoia
os pés na borda de cima do node, deixando à mostra o número e as estrelas. */
width: 44px; margin: -76px 0 0 -22px;
pointer-events: none;
/* --dur é calculada por deslocamento: pulo curto entre fases vizinhas, viagem
longa quando o toque é lá em cima do mapa. */
transition: left var(--dur, .5s) cubic-bezier(.4, 0, .2, 1),
top var(--dur, .5s) cubic-bezier(.4, 0, .2, 1);
filter: drop-shadow(0 6px 6px rgba(2, 6, 23, .45));
z-index: 3;
}
.q-heroi.is-instantaneo { transition: none; }
/* Caminhada: um pulinho por trecho, com a quantidade exata de saltos (--saltos)
para o último terminar junto com a chegada, e não no meio do ar. */
.q-heroi.is-andando {
animation: q-pulinho var(--salto, .26s) ease-in-out var(--saltos, infinite);
}
/* Poeirinha que sobe a cada aterrissagem. */
.q-heroi::after {
content: "";
position: absolute; left: 50%; bottom: -4px;
width: 22px; height: 7px; margin-left: -11px;
border-radius: 50%;
background: rgba(226, 232, 240, .5);
opacity: 0;
}
.q-heroi.is-andando::after {
animation: q-poeira var(--salto, .26s) ease-out var(--saltos, infinite);
}
/* Parado, o boneco respira; andando, quem manda é o pulo. */
.q-heroi .q-boneco { transform-origin: 50% 100%; animation: q-parado 3.2s ease-in-out infinite; }
.q-heroi.is-andando .q-boneco, .q-heroi.is-entrando .q-boneco { animation: none; }
/* Indo para a esquerda o boneco vira de lado — só o desenho, para o foguinho
preso ao ombro não sair espelhado junto. */
.q-heroi.is-esquerda .q-boneco svg { transform: scaleX(-1); }
/* Entrada na fase: pula alto e mergulha dentro do node. */
.q-heroi.is-entrando { animation: q-heroi-entra .42s cubic-bezier(.35, 0, .7, 1) forwards; }
/* Rodapé do mapa: a dica no meio e os interruptores de som encostados à
direita. O padding da esquerda compensa a largura dos botões, para o texto
ficar centrado na tela e não só no espaço que sobrou. */
.q-mapa__rodape { display: flex; align-items: center; gap: 2px; padding-left: 74px; }
.q-mapa__dica {
flex: 1; min-width: 0;
min-height: 20px; margin: 8px 0; font-size: .82rem;
color: var(--q-txt-fraco); text-align: center;
}
/* ---------------- Painel da fase ---------------- */
.q-painel { position: fixed; inset: 0; z-index: 40; }
.q-painel[hidden] { display: none; }
.q-painel__fundo {
position: absolute; inset: 0;
background: rgba(2, 6, 23, .6);
opacity: 0; transition: opacity .22s ease;
}
.q-painel.is-aberto .q-painel__fundo { opacity: 1; }
.q-painel__folha {
position: absolute; left: 50%; bottom: 0;
width: min(560px, 100%);
max-height: 88vh; overflow-y: auto;
padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
background: var(--q-bg-alt);
border-radius: 22px 22px 0 0;
border-top: 2px solid var(--q-borda);
transform: translate(-50%, 100%);
transition: transform .26s cubic-bezier(.2, .8, .3, 1);
overscroll-behavior: contain;
}
.q-painel.is-aberto .q-painel__folha { transform: translate(-50%, 0); }
.q-painel__fechar {
position: absolute; top: 10px; right: 10px;
width: 40px; height: 40px;
background: transparent; border: 0; color: var(--q-txt-fraco);
font-size: 1.1rem; cursor: pointer;
}
.q-painel__topo { display: flex; align-items: center; gap: 12px; padding-right: 40px; }
.q-painel__icone {
flex: 0 0 auto;
width: 54px; height: 54px;
display: flex; align-items: center; justify-content: center;
border-radius: 16px; font-size: 1.7rem;
background: linear-gradient(160deg, var(--cor, #7c3aed), rgba(15, 23, 42, .8));
border: 2px solid rgba(255, 255, 255, .8);
}
.q-painel__numero { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--q-txt-fraco); }
.q-painel__topo h3 { margin: 1px 0 0; font-size: 1.1rem; }
.q-painel__tema { font-size: .8rem; color: var(--q-acento); }
.q-painel__meta { margin: 2px 0 0; font-size: .88rem; color: var(--q-txt-fraco); text-align: center; }
.q-painel__recorde { margin: 8px 0 0; font-size: .85rem; text-align: center; }
.q-painel__bloqueio {
margin: 14px 0 0; padding: 12px;
background: var(--q-card); border-radius: 12px;
font-size: .88rem; text-align: center; color: var(--q-txt-fraco);
}
/* ---------------- Cortina de entrada na fase ---------------- */
/* A íris fecha em cima do node (--cx/--cy vêm do JS, em pixels da janela),
mostra o cartão da fase e abre de novo já com o jogo montado atrás. */
.q-cortina { position: fixed; inset: 0; z-index: 60; }
.q-cortina[hidden] { display: none; }
/* Um anel gigante: o buraco no meio é o conteúdo, e a borda de 130vmax garante
que o resto da tela fique coberto em qualquer tamanho. Encolher o buraco
fecha a íris — animar width/height é barato aqui, é um elemento só. */
.q-cortina__iris {
position: absolute; left: var(--cx, 50%); top: var(--cy, 50%);
width: 0; height: 0;
border: 130vmax solid #050914;
border-radius: 50%;
transform: translate(-50%, -50%);
}
/* both (e não forwards): o primeiro quadro já é o buraco aberto, senão a tela
pisca escura antes de a animação pegar. */
.q-cortina.is-fechando .q-cortina__iris { animation: q-iris-fecha .42s ease-in both; }
.q-cortina.is-abrindo .q-cortina__iris { animation: q-iris-abre .42s ease-out both; }
.q-cortina__cartao {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
padding: 24px; text-align: center;
opacity: 0; transform: scale(.92);
transition: opacity .2s ease, transform .2s ease;
}
.q-cortina.is-cartao .q-cortina__cartao { opacity: 1; transform: none; }
.q-cortina__icone {
width: 84px; height: 84px; margin-bottom: 6px;
display: flex; align-items: center; justify-content: center;
border-radius: 26px; font-size: 2.6rem;
background: linear-gradient(160deg, var(--cor, #7c3aed), rgba(15, 23, 42, .85));
border: 3px solid rgba(255, 255, 255, .9);
box-shadow: 0 8px 0 rgba(2, 6, 23, .6);
}
.q-cortina.is-cartao .q-cortina__icone { animation: q-node-pulso 1.2s ease-in-out infinite; }
.q-cortina__numero {
font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
color: rgba(226, 232, 240, .7);
}
.q-cortina__nome { font-size: 1.5rem; font-weight: 800; color: #fff; }
.q-cortina__meta { font-size: .86rem; color: var(--q-txt-fraco); }
.q-cortina__estrelas { margin-top: 6px; font-size: 1.5rem; gap: 4px; }
.q-cortina__estrelas .q-estrela { font-size: 1.5rem; }
/* ---------------- Ranking da fase ---------------- */
.q-fase-ranking { display: flex; flex-direction: column; gap: 6px; }
.q-fase-linha {
display: flex; align-items: center; gap: 8px;
padding: 7px 10px;
background: var(--q-card); border-radius: 11px;
font-size: .88rem;
}
.q-fase-linha.is-eu { background: var(--q-card-2); outline: 1px solid var(--q-acento); }
.q-fase-linha__pos { min-width: 26px; font-weight: 800; color: var(--q-txt-fraco); font-size: .82rem; }
.q-fase-linha__nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-fase-linha__fogo { font-size: .72rem; color: #fb923c; }
.q-fase-linha__pontos { font-weight: 800; color: var(--q-acento); }
.q-fase-linha .q-boneco .q-fogo { display: none; }
/* ---------------- Fim de fase (tela de resultado) ---------------- */
.q-fase-fim {
padding: 16px; margin-bottom: 14px;
background: var(--q-card); border: 1px solid var(--q-borda); border-radius: var(--q-raio);
text-align: center;
}
.q-fase-fim__icone { font-size: 2.4rem; line-height: 1; }
.q-fase-fim__fase { margin: 2px 0 0; font-size: .8rem; color: var(--q-txt-fraco); }
.q-fase-fim__estado { margin: 4px 0 0; font-weight: 800; }
.q-fase-fim__estado.is-ok { color: var(--q-ok); }
.q-fase-fim__estado.is-nao { color: var(--q-aviso); }
.q-fase-fim__desbloqueio {
margin: 10px 0 0; padding: 9px 12px;
background: rgba(34, 197, 94, .14); border-radius: 11px;
font-size: .88rem; color: #86efac;
}
/* ---------------- Editor do avatar ---------------- */
/* A tela ocupa a janela inteira e só o painel de opções rola por dentro: o
boneco e o carrossel de categorias nunca saem da vista.
A altura precisa ser definida (e não flex:1 herdado da .q-app, que só tem
min-height): sem isso o painel cresceria até caber toda a lista, quem rolaria
seria a página e o preview subiria junto. Desconta o padding da .q-app. */
.q-tela--avatar {
display: flex; flex-direction: column; min-height: 0;
height: calc(100dvh - 44px - env(safe-area-inset-bottom));
}
.q-tela--avatar[hidden] { display: none; }
/* O palco come a sobra da tela: nas categorias de poucas opções (blusa, parte
de baixo) o painel de baixo precisa de pouca altura e o boneco cresce, em vez
de sobrar um vazio no meio da tela. */
.q-avatar-palco {
position: relative; flex: 1 1 auto;
display: flex; align-items: flex-end; justify-content: center;
min-height: 140px; max-height: 340px; margin-bottom: 6px;
background: linear-gradient(180deg, #1e3a8a, #0ea5e9 62%, #16a34a 63%, #14532d);
border-radius: 20px; overflow: hidden;
}
.q-avatar-palco__luz {
position: absolute; top: -40%; left: 50%; transform: translateX(-50%);
width: 150%; height: 130%;
background: radial-gradient(ellipse at center, rgba(255, 255, 255, .22), transparent 62%);
}
/* No editor quem manda é a altura do palco: com o boneco medido pela largura,
em tela baixa ele passava do topo e a cabeça ficava cortada.
Fica absoluto de propósito. O palco cresce por flex (não tem altura fixa), e
contra altura de flex o `height: 100%` do boneco resolvia como zero — o
preview sumia e sobrava só o foguinho. Preso ao topo e ao rodapé do palco, a
altura aqui é sempre definida. */
.q-avatar-grande {
position: absolute; top: 14px; right: 0; bottom: 16px; left: 0;
display: flex; align-items: flex-end; justify-content: center;
}
.q-avatar-grande .q-boneco { width: auto; height: 100%; }
.q-avatar-grande .q-boneco svg { width: auto; height: 100%; }
.q-avatar-grande .q-fogo { font-size: .78rem; right: -22%; padding: 3px 9px; }
.q-dado {
position: absolute; top: 12px; right: 12px;
width: 44px; height: 44px;
background: rgba(15, 23, 42, .6); border: 2px solid rgba(255, 255, 255, .3); border-radius: 13px;
font-size: 1.3rem; cursor: pointer;
}
/* Carrossel das partes do personagem: rola na horizontal e sangra até a borda
da tela (margem negativa = padding da .q-app), para ficar claro que continua. */
.q-abas-peca {
flex: 0 0 auto;
display: flex; gap: 8px;
margin: 2px -16px 8px; padding: 4px 16px 6px;
overflow-x: auto; overflow-y: hidden;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.q-abas-peca::-webkit-scrollbar { display: none; }
.q-aba-peca {
flex: 0 0 auto;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
width: 80px; min-height: 68px; padding: 8px 6px;
background: var(--q-card); color: var(--q-txt-fraco);
border: 2px solid var(--q-borda); border-radius: 14px;
font: inherit; font-size: .68rem; font-weight: 700; line-height: 1.15;
text-align: center; cursor: pointer; touch-action: manipulation;
}
.q-aba-peca.is-ativo { border-color: var(--q-acento); background: var(--q-card-2); color: #fff; }
.q-aba-peca__icone { font-size: 1.3rem; line-height: 1; font-style: normal; }
/* Nas abas de cor a marca é a própria cor escolhida no momento. */
.q-aba-peca__cor {
width: 22px; height: 22px; border-radius: 50%;
background: var(--cor); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
}
.q-avatar-painel {
flex: 0 1 auto; min-height: 0; max-height: 46%;
overflow-y: auto; overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding-bottom: 12px;
}
.q-avatar-painel .q-rotulo { margin: 0 0 10px; }
/* Uma categoria por vez: dá para usar botões maiores. */
.q-opcoes-mini {
display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px;
}
.q-opcao-mini {
padding: 12px 10px; min-height: 48px;
background: var(--q-card); color: var(--q-txt);
border: 2px solid var(--q-borda); border-radius: 12px;
font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
touch-action: manipulation;
}
.q-opcao-mini.is-ativo { border-color: var(--q-acento); background: var(--q-card-2); color: #fff; }
.q-cores { display: flex; flex-wrap: wrap; gap: 10px; }
.q-cor {
width: 46px; height: 46px; padding: 0;
background: var(--cor); border: 3px solid transparent; border-radius: 50%;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
cursor: pointer; touch-action: manipulation;
}
.q-cor.is-ativo { border-color: #fff; transform: scale(1.08); }
/* Cor exclusiva ainda não ganha: aparece apagada e com o cadeado por cima. Ela
fica na lista de propósito — esconder o que falta tiraria o motivo de girar. */
.q-cor.is-trancada {
cursor: not-allowed;
filter: grayscale(.7) brightness(.6);
display: grid; place-items: center;
font-size: 18px; line-height: 1;
}
/* Salvar fica encostado no rodapé da tela, fora da área que rola. */
.q-tela--avatar .q-btn { flex: 0 0 auto; margin-top: 0; padding: 15px 20px; }
@keyframes q-node-pulso {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.07); }
}
/* Anel que se abre e some — a luzinha da fase que está esperando o jogador. */
@keyframes q-node-anel {
0% { transform: scale(1); opacity: .8; }
70%, 100% { transform: scale(1.45); opacity: 0; }
}
@keyframes q-icone-bole {
0%, 100% { transform: translateY(0) rotate(0); }
30% { transform: translateY(-2px) rotate(-5deg); }
60% { transform: translateY(-1px) rotate(4deg); }
}
/* Onda que percorre o caminho aberto, bolinha a bolinha. */
@keyframes q-passo-onda {
0%, 100% { transform: scale(1); opacity: .55; }
45% { transform: scale(1.5); opacity: 1; }
}
/* Respiração de quem está parado: peso de um pé para o outro. */
@keyframes q-parado {
0%, 100% { transform: translateY(0) scaleY(1); }
50% { transform: translateY(-1px) scaleY(1.025); }
}
/* Pulinho da caminhada — agacha para saltar e amortece na aterrissagem. */
@keyframes q-pulinho {
0% { transform: translateY(0) scale(1.06, .94); }
25% { transform: translateY(-9px) scale(.95, 1.06); }
55% { transform: translateY(-11px) scale(.97, 1.04); }
85% { transform: translateY(0) scale(1.07, .93); }
100% { transform: translateY(0) scale(1); }
}
@keyframes q-poeira {
0%, 70% { transform: scale(.3); opacity: 0; }
85% { transform: scale(1); opacity: .5; }
100% { transform: scale(1.5); opacity: 0; }
}
/* Entrada na fase: sobe, gira de leve e mergulha dentro do node. */
@keyframes q-heroi-entra {
0% { transform: translateY(0) scale(1); opacity: 1; }
40% { transform: translateY(-34px) scale(1.06) rotate(-6deg); opacity: 1; }
100% { transform: translateY(22px) scale(.28) rotate(6deg); opacity: 0; }
}
@keyframes q-node-engole {
0% { transform: scale(1); filter: brightness(1); }
55% { transform: scale(.9); filter: brightness(1.1); }
75% { transform: scale(1.18); filter: brightness(2.2); }
100% { transform: scale(1); filter: brightness(1); }
}
/* O buraco da íris. Precisa de raio maior que a diagonal da janela (1,42vmax)
para o node poder estar num canto sem o anel escuro aparecer no canto oposto:
300vmax de buraco = 150vmax de raio, com folga. */
@keyframes q-iris-fecha {
from { width: 300vmax; height: 300vmax; }
to { width: 0; height: 0; }
}
@keyframes q-iris-abre {
from { width: 0; height: 0; }
to { width: 300vmax; height: 300vmax; }
}
/* A placa do estágio boiando — o translateX(-50%) é o que a mantém centrada. */
@keyframes q-placa {
0%, 100% { transform: translate(-50%, 0); }
50% { transform: translate(-50%, -3px); }
}
@keyframes q-estrela-cai {
0% { transform: scale(2.4) rotate(-25deg); opacity: 0; }
70% { transform: scale(.9) rotate(6deg); opacity: 1; }
100% { transform: scale(1) rotate(0); opacity: 1; }
}
/* =========================================================================
Modo aprender — lista de lições e a lição passo a passo
========================================================================= */
.q-btn--aprender {
background: linear-gradient(135deg, #0891b2, #0e7490);
color: #fff; box-shadow: 0 4px 0 #155e75;
}
.q-btn--aprender:active { box-shadow: 0 2px 0 #155e75; }
/* Revisão. Âmbar em vez do azul dos outros modos: é a dívida do jogador, e
ela pede um tom de "resolve isso" sem chegar no vermelho de erro. */
.q-btn--revisar {
background: linear-gradient(135deg, #d97706, #b45309);
color: #fff; box-shadow: 0 4px 0 #92400e;
}
.q-btn--revisar:active { box-shadow: 0 2px 0 #92400e; }
.q-btn--revisar[hidden] { display: none; }
.q-revisar__conta {
background: rgba(69, 26, 3, .28);
border-radius: 999px;
padding: 2px 10px;
margin-left: 6px;
font-variant-numeric: tabular-nums;
}
/* Disciplina e assunto usam o mesmo cartão: os dois são a mesma pergunta em
níveis diferentes ("por onde eu sigo?"), e responder a uma leva à outra. */
.q-escolhas { display: flex; flex-direction: column; gap: 10px; }
.q-escolhas[hidden] { display: none; }
.q-escolha {
display: flex; align-items: center; gap: 12px;
width: 100%; padding: 14px; text-align: left;
background: var(--q-card); color: var(--q-txt);
border: 2px solid var(--q-borda); border-radius: 14px;
border-left: 4px solid var(--cor-tema, var(--q-acento));
cursor: pointer; touch-action: manipulation;
transition: border-color .15s ease, transform .1s ease, background .15s ease;
}
.q-escolha:active { transform: scale(.99); }
/* Tudo concluído continua clicável: revisar é um caminho de primeira classe. */
.q-escolha.is-completa { background: var(--q-card-2); }
/* Mundo da trilha que ainda não abriu: fica na lista para anunciar que vem
conteúdo por aí, mas apagado e sem seta -- nada ali responde ao toque. */
.q-escolha.is-em-breve {
opacity: .55; cursor: default; border-left-color: var(--q-borda);
}
.q-escolha.is-em-breve:active { transform: none; }
.q-escolha__icone { flex: 0 0 auto; font-size: 1.7rem; line-height: 1; }
.q-escolha__corpo { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.q-escolha__nome { font-weight: 700; font-size: 1rem; }
.q-escolha__ok { color: var(--q-ok); }
.q-escolha__selo {
display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px;
background: var(--q-card-2); border: 1px solid var(--q-borda);
font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
color: var(--q-txt-fraco); vertical-align: middle;
}
.q-escolha__desc {
font-size: .8rem; color: var(--q-txt-fraco); line-height: 1.4;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.q-escolha__meta { font-size: .74rem; color: var(--q-txt-fraco); font-variant-numeric: tabular-nums; }
.q-escolha__seta { flex: 0 0 auto; font-size: 1.3rem; color: var(--q-txt-fraco); }
/* Caminho percorrido, acima do título: "Matemática" enquanto se lê as lições de
Análise Combinatória. Diz onde o ← vai dar sem gastar um botão.
(Não confundir com .q-caminho, que é a estrada entre as fases da trilha.) */
.q-cabecalho__titulo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.q-cabecalho__caminho {
font-size: .7rem; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--q-txt-fraco);
}
.q-cabecalho__caminho[hidden] { display: none; }
.q-aprender__resumo { margin-bottom: 16px; }
.q-aprender__resumo[hidden] { display: none; }
.q-aprender__barra {
height: 7px; background: var(--q-card); border-radius: 999px; overflow: hidden;
}
.q-aprender__barra > i {
display: block; height: 100%;
background: var(--cor-tema, var(--q-acento));
border-radius: 999px; transition: width .4s cubic-bezier(.2,.7,.3,1);
}
.q-aprender__texto { margin: 7px 0 0; font-size: .82rem; color: var(--q-txt-fraco); }
/* No cartão de escolha a barra é uma linha do corpo (span), e não um bloco. O
trilho pede fundo próprio: o do resumo se apoia no fundo da tela, e aqui o
cartão tem exatamente essa cor — sem isto a barra vazia sumiria. */
.q-escolha .q-aprender__barra {
display: block; width: 100%; height: 5px; margin-top: 2px;
background: rgba(255,255,255,.09);
}
.q-licoes { display: flex; flex-direction: column; gap: 10px; }
.q-licoes[hidden] { display: none; }
.q-licao-cartao {
display: flex; align-items: center; gap: 12px;
width: 100%; padding: 14px; text-align: left;
background: var(--q-card); color: var(--q-txt);
border: 2px solid var(--q-borda); border-radius: 14px;
cursor: pointer; touch-action: manipulation;
transition: border-color .15s ease, transform .1s ease, opacity .15s ease;
}
.q-licao-cartao:active { transform: scale(.99); }
.q-licao-cartao.is-aberta { border-color: var(--cor-tema, var(--q-acento)); }
.q-licao-cartao.is-concluida { opacity: .82; }
/* Travada continua legível: o jogador precisa ver o que vem pela frente — é
isso que faz querer concluir a anterior. */
.q-licao-cartao.is-travada { opacity: .45; cursor: default; }
.q-licao-cartao__marca {
flex: 0 0 auto; display: grid; place-items: center;
width: 38px; height: 38px; border-radius: 50%;
background: var(--q-card-2); border: 2px solid var(--q-borda);
font-size: .95rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.q-licao-cartao.is-aberta .q-licao-cartao__marca {
border-color: var(--cor-tema, var(--q-acento));
color: var(--cor-tema, var(--q-acento));
}
.q-licao-cartao.is-concluida .q-licao-cartao__marca {
background: var(--q-ok-fundo); border-color: var(--q-ok); color: var(--q-ok);
}
.q-licao-cartao__corpo { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.q-licao-cartao__nome { font-weight: 700; font-size: .98rem; }
.q-licao-cartao__obj { font-size: .8rem; color: var(--q-txt-fraco); line-height: 1.4; }
.q-licao-cartao__meta {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
margin-top: 3px; font-size: .72rem; color: var(--q-txt-fraco);
}
.q-licao-cartao__seta { flex: 0 0 auto; font-size: 1.3rem; color: var(--q-txt-fraco); }
.q-selo {
padding: 2px 8px; border-radius: 999px;
font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.q-selo--n1 { background: rgba(34,197,94,.16); color: #4ade80; }
.q-selo--n2 { background: rgba(245,158,11,.16); color: #fbbf24; }
.q-selo--n3 { background: rgba(239,68,68,.16); color: #f87171; }
/* ---------------- A lição ---------------- */
.q-licao__cabecalho { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.q-licao__cabecalho h2 { margin: 0; font-size: 1.15rem; }
.q-licao__tema {
font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
color: var(--cor-tema, var(--q-acento));
}
.q-licao__contador {
margin: 6px 0 14px; font-size: .75rem; color: var(--q-txt-fraco);
font-variant-numeric: tabular-nums;
}
.q-licao__contexto {
padding: 14px 16px; margin-bottom: 14px;
background: var(--q-card); border: 1px solid var(--q-borda);
border-radius: var(--q-raio);
font-size: .9rem; line-height: 1.6; color: var(--q-txt-fraco);
}
.q-licao__contexto[hidden] { display: none; }
.q-licao__contexto p:first-child { margin-top: 0; }
.q-licao__contexto p:last-child { margin-bottom: 0; }
.q-licao__contexto strong { color: var(--q-txt); }
.q-problema {
padding: 16px; margin-bottom: 6px;
background: var(--q-card-2);
border: 1px solid var(--q-borda); border-left: 4px solid var(--q-acento);
border-radius: var(--q-raio);
}
.q-problema__rotulo {
display: block; margin-bottom: 8px;
font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700;
color: var(--q-acento);
}
.q-problema__texto { font-size: 1.05rem; line-height: 1.6; overflow-x: auto; }
.q-problema__texto p:first-child { margin-top: 0; }
.q-problema__texto p:last-child { margin-bottom: 0; }
/* ---------------- Passos ---------------- */
.q-licao-passos { display: flex; flex-direction: column; }
/* A linha vertical que liga um passo ao outro: é ela que faz a sequência ser
lida como um caminho, e não como uma pilha de cartões soltos. */
.q-licao-passo {
position: relative;
display: flex; gap: 12px;
padding: 16px 0 6px 0;
}
.q-licao-passo::before {
content: ""; position: absolute;
left: 17px; top: 0; bottom: 0;
width: 2px; background: var(--q-borda);
}
.q-licao-passo:first-child::before { top: 26px; }
.q-licao-passo:last-child::before { bottom: auto; height: 26px; }
.q-licao-passo__num {
position: relative; z-index: 1;
flex: 0 0 auto; display: grid; place-items: center;
width: 36px; height: 36px; border-radius: 50%;
background: var(--q-acento-2); color: #fff;
font-weight: 800; font-size: .9rem;
box-shadow: 0 0 0 4px var(--q-bg);
}
.q-licao-passo__corpo {
flex: 1; min-width: 0;
padding: 14px 16px;
background: var(--q-card); border: 1px solid var(--q-borda);
border-radius: var(--q-raio);
}
.q-licao-passo__titulo { margin: 0 0 8px; font-size: .95rem; font-weight: 700; }
.q-licao-passo__expr {
padding: 10px 12px; margin: 0 0 8px;
background: var(--q-bg-alt); border-radius: 10px;
font-size: 1.05rem; line-height: 1.7;
overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.q-licao-passo__expr p { margin: 0; }
.q-licao-passo__expr p + p { margin-top: 6px; }
.q-licao-passo__texto { font-size: .88rem; line-height: 1.55; color: var(--q-txt-fraco); }
.q-licao-passo__texto p:first-child { margin-top: 0; }
.q-licao-passo__texto p:last-child { margin-bottom: 0; }
.q-licao-passo__porque {
display: block; width: 100%; margin-top: 12px; padding: 9px 12px;
background: transparent; color: var(--q-acento);
border: 1px dashed rgba(167,139,250,.45); border-radius: 10px;
font-size: .82rem; font-weight: 600; text-align: left;
cursor: pointer; touch-action: manipulation;
transition: background .15s ease, border-color .15s ease;
}
.q-licao-passo__porque.is-aberto {
background: rgba(167,139,250,.1); border-style: solid;
}
.q-licao-passo__explica {
margin-top: 8px; padding: 12px 14px;
background: var(--q-card-2); border-left: 3px solid var(--q-acento);
border-radius: 0 10px 10px 0;
font-size: .86rem; line-height: 1.65; color: var(--q-txt);
animation: q-explica-abre .3s ease both;
overflow-x: auto;
}
.q-licao-passo__explica[hidden] { display: none; }
.q-licao-passo__explica p:first-child { margin-top: 0; }
.q-licao-passo__explica p:last-child { margin-bottom: 0; }
.q-licao-passo.is-entrando { animation: q-licao-passo-entra .45s cubic-bezier(.2,.7,.3,1) both; }
/* ---------------- Fim da lição ---------------- */
.q-licao__fim {
margin-top: 18px; padding: 18px 16px;
background: var(--q-card); border: 1px solid var(--q-ok);
border-radius: var(--q-raio);
animation: q-entra .35s ease both;
}
.q-licao__fim[hidden] { display: none; }
.q-licao__fim-icone { font-size: 1.7rem; }
.q-licao__conclusao { margin-top: 6px; font-size: .95rem; line-height: 1.6; overflow-x: auto; }
.q-licao__conclusao p:first-child { margin-top: 0; }
.q-licao__aviso {
margin: 12px 0 0; padding: 10px 12px;
background: var(--q-ok-fundo); border-radius: 10px;
font-size: .87rem; color: #bbf7d0;
}
.q-licao__resumo { margin: 0; padding-left: 20px; }
.q-licao__resumo li { margin-bottom: 6px; font-size: .87rem; line-height: 1.5; color: var(--q-txt-fraco); }
/* ========================================================================= Fórmulas matemáticas — HTML + CSS puro, sem KaTeX/MathJax.
Estas classes são a "API" que o JSON dos cards usa.
========================================================================= */
/* Fração: 8!6! */
.frac {
display: inline-flex; flex-direction: column;
vertical-align: middle; text-align: center;
margin: 0 .2em; line-height: 1.2; font-size: .95em;
}
.frac > .num { padding: 0 .35em; border-bottom: .075em solid currentColor; }
.frac > .den { padding: 0 .35em; }
/* Matriz: 1…
Determinante: adicione .det (barras retas em vez de colchetes). */
.mat {
display: inline-grid; gap: .18em .85em;
vertical-align: middle; position: relative;
padding: .42em .72em; margin: 0 .28em;
justify-items: center; line-height: 1.35;
}
.mat::before, .mat::after {
content: ""; position: absolute; top: 0; bottom: 0;
width: .34em; border: .1em solid currentColor;
}
.mat::before { left: 0; border-right: 0; }
.mat::after { right: 0; border-left: 0; }
.mat.par::before, .mat.par::after { border-radius: 70%/50%; }
/* Determinante: barras retas dos dois lados. Precisa zerar a borda inteira e
redeclarar com estilo — as regras acima usam a forma curta `border-left: 0`,
que também define border-left-style: none; só sobrescrever a largura
deixaria a barra da direita invisível. */
.mat.det::before, .mat.det::after {
width: 0;
border: 0;
border-left: .09em solid currentColor;
border-radius: 0;
}
.mat-c1 { grid-template-columns: repeat(1, minmax(1em, auto)); }
.mat-c2 { grid-template-columns: repeat(2, minmax(1em, auto)); }
.mat-c3 { grid-template-columns: repeat(3, minmax(1em, auto)); }
.mat-c4 { grid-template-columns: repeat(4, minmax(1em, auto)); }
/* Binomial C(n,p): 83 */
.binom {
display: inline-flex; flex-direction: column; align-items: center;
vertical-align: middle; position: relative;
padding: .34em .58em; margin: 0 .2em; line-height: 1.1;
}
.binom::before, .binom::after {
content: ""; position: absolute; top: 0; bottom: 0;
width: .3em; border: .1em solid currentColor; border-radius: 70%/50%;
}
.binom::before { left: 0; border-right: 0; }
.binom::after { right: 0; border-left: 0; }
/* Raiz: Δ */
.sqrt { display: inline-flex; align-items: stretch; vertical-align: middle; }
.sqrt::before { content: "√"; font-size: 1.15em; line-height: 1; }
.sqrt > .rad { border-top: .07em solid currentColor; padding: .1em .3em 0 .12em; }
/* Sistema linear: x + y = 5… */
.sistema {
display: inline-block; vertical-align: middle;
padding: .1em 0 .1em .7em; margin: .25em 0;
border-left: .12em solid currentColor; border-radius: .8em 0 0 .8em;
}
.sistema > span, .sistema > div { display: block; white-space: nowrap; }
/* Fatorial: 5 -> 5! */
.fat { font-weight: 600; }
.fat::after { content: "!"; color: var(--q-acento); }
.destaque { color: var(--q-acento); font-weight: 700; }
/* Fórmulas dentro de alternativas/revisão herdam a cor do estado */
.q-alt .destaque, .q-alt .fat::after { color: inherit; }
/* =========================================================================
Animações
========================================================================= */
@keyframes q-entra {
from { opacity: 0; transform: translateY(14px) scale(.985); }
to { opacity: 1; transform: none; }
}
@keyframes q-acerto {
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
35% { transform: scale(1.04); box-shadow: 0 0 0 15px rgba(34,197,94,0); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
@keyframes q-erro {
0%, 100% { transform: translateX(0); }
15% { transform: translateX(-9px); }
30% { transform: translateX(8px); }
45% { transform: translateX(-6px); }
60% { transform: translateX(5px); }
75% { transform: translateX(-3px); }
}
@keyframes q-chama {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.3) rotate(-6deg); }
}
@keyframes q-tempo {
0%, 100% { opacity: 1; }
50% { opacity: .45; }
}
/* O passo novo desliza do lado do número, como se fosse escrito ali na hora. */
@keyframes q-licao-passo-entra {
from { opacity: 0; transform: translate3d(-10px, 10px, 0) scale(.97); }
to { opacity: 1; transform: none; }
}
@keyframes q-explica-abre {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
@keyframes q-confete {
0% { transform: translate3d(0, 0, 0) rotate(0); opacity: 1; }
100% { transform: translate3d(var(--dx, 0), 118vh, 0) rotate(var(--rot, 540deg)); opacity: .85; }
}
/* Entra do tamanho da tela e recua até o lugar dele. O .q-app corta na
horizontal, então crescer aqui não faz a página rolar de lado. */
@keyframes q-ganho-entra {
from { opacity: 0; transform: scale(2.4); }
55% { opacity: 1; }
to { opacity: 1; transform: scale(1); }
}
/* O respiro do letreiro: o brilho sobe e desce devagar, mas o texto nunca
apaga — piscar de verdade cansaria a leitura de um valor. */
@keyframes q-ganho-neon {
0%, 100% { text-shadow: 0 0 6px rgba(52, 211, 153, .25); }
50% { text-shadow: 0 0 10px rgba(52, 211, 153, .7), 0 0 22px rgba(52, 211, 153, .35); }
}
/* =========================================================================
Mesada: missões, saldo do mês e roleta.
Paleta própria (verde/dourado) de propósito: o roxo é da pontuação e o azul
é da trilha. Dinheiro tem de ser visivelmente outra moeda — quem olha a tela
não pode confundir saldo com placar.
========================================================================= */
:root {
--q-dinheiro: #34d399;
--q-dinheiro-2: #059669;
--q-ouro: #fbbf24;
}
/* ---------------- Botão e chips da home ---------------- */
.q-btn--mesada {
background: linear-gradient(180deg, #10b981, #059669);
color: #04241a;
box-shadow: 0 4px 0 #046c4e;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
}
.q-btn--mesada:active { box-shadow: 0 2px 0 #046c4e; }
.q-mesada__saldo {
background: rgba(4, 36, 26, .22);
border-radius: 999px;
padding: 2px 10px;
font-variant-numeric: tabular-nums;
}
.q-mesada__giros {
background: var(--q-ouro);
color: #422006;
border-radius: 999px;
padding: 2px 9px;
font-size: .85rem;
}
.q-mesada__giros[hidden] { display: none; }
.q-mesada__falta {
margin: -4px 0 4px;
font-size: .85rem;
color: var(--q-txt-fraco);
}
/* ---------------- Trava de notificações ---------------- */
/* Amarelo de aviso (e não vermelho de erro): nada quebrou — falta um passo, e
ele está a um toque daqui. */
.q-mesada__travada {
display: block;
width: 100%;
margin: -2px 0 6px;
padding: 10px 12px;
border: 1px solid var(--q-ouro);
border-radius: 12px;
background: rgba(251, 191, 36, .12);
color: var(--q-ouro);
font: inherit;
font-size: .85rem;
text-align: left;
cursor: pointer;
}
.q-mesada__travada[hidden] { display: none; }
.q-travada {
border: 1px solid var(--q-ouro);
border-radius: var(--q-raio);
background: rgba(251, 191, 36, .12);
padding: 14px;
margin-bottom: 14px;
text-align: center;
}
.q-travada[hidden] { display: none; }
.q-travada__texto {
margin: 0 0 10px;
font-size: .92rem;
color: var(--q-ouro);
}
/* ---------------- Cartão do saldo ---------------- */
.q-saldo {
background: linear-gradient(160deg, #064e3b, #0f172a 70%);
border: 1px solid #0f766e;
border-radius: var(--q-raio);
padding: 18px 16px 14px;
text-align: center;
margin-bottom: 14px;
}
.q-saldo__mes {
display: block;
font-size: .8rem;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--q-txt-fraco);
}
.q-saldo__valor {
display: block;
font-size: 2.6rem;
font-weight: 800;
line-height: 1.1;
color: var(--q-dinheiro);
font-variant-numeric: tabular-nums;
margin: 2px 0 10px;
}
.q-saldo__barra {
height: 10px;
background: rgba(255, 255, 255, .08);
border-radius: 999px;
overflow: hidden;
}
.q-saldo__barra > i {
display: block;
height: 100%;
width: 0;
border-radius: 999px;
background: linear-gradient(90deg, var(--q-dinheiro), var(--q-ouro));
transition: width .6s ease;
}
.q-saldo__partes {
display: flex;
justify-content: center;
gap: 18px;
margin-top: 10px;
font-size: .85rem;
color: var(--q-txt-fraco);
}
.q-saldo__partes b { color: var(--q-txt); margin-left: 4px; }
.q-saldo__nota {
margin: 10px 0 0;
font-size: .85rem;
font-weight: 700;
color: var(--q-ouro);
}
/* ---------------- Chamada e projeção ---------------- */
.q-chamada {
margin: 0 0 12px;
padding: 12px 14px;
background: var(--q-card);
border-left: 4px solid var(--q-dinheiro);
border-radius: 0 var(--q-raio) var(--q-raio) 0;
font-weight: 600;
}
.q-projecao {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 18px;
}
.q-projecao__item {
background: var(--q-card);
border-radius: 12px;
padding: 10px 8px;
text-align: center;
}
.q-projecao__item span { display: block; font-size: .72rem; color: var(--q-txt-fraco); }
.q-projecao__item b {
display: block;
margin-top: 2px;
font-size: 1rem;
color: var(--q-dinheiro);
font-variant-numeric: tabular-nums;
}
/* ---------------- Lista de missões ---------------- */
.q-missoes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.q-missao {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 10px;
background: var(--q-card);
border: 1px solid var(--q-borda);
border-radius: 12px;
padding: 10px 12px;
}
.q-missao.is-feita { border-color: var(--q-dinheiro-2); background: var(--q-card-2); }
/* Missão em aberto é botão — leva para a tela onde ela se cumpre. Precisa
desfazer o que o navegador dá de graça a um