:root {
  --fundo1: #f5f0e6; --fundo2: #d8cfbf; --tinta: #1d2a30; --suave: #5b6a72; --acento: #0f6f7a; --acento2: #0f3d45;
  --papel: #ffffff; --linha: #e3ddd2; --baixo: #c0392b; --alto: #1e8e4e; --sombra: 0 10px 30px rgba(15, 40, 50, .18);
  --topo: env(safe-area-inset-top, 0px); --base: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root { --fundo1: #1d2a33; --fundo2: #0d151b; --tinta: #e9eef1; --suave: #a3b2ba; --acento: #4fc3cf; --acento2: #0b2a30;
    --papel: #16222a; --linha: #2a3a44; --baixo: #ff7b6b; --alto: #5fd38d; --sombra: 0 10px 30px rgba(0,0,0,.45); }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--tinta);
  background: radial-gradient(120% 90% at 50% 40%, var(--fundo1), var(--fundo2)); -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#palco { position: fixed; inset: 0; }
#palco canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }

.barra { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 6px;
  padding: calc(8px + var(--topo)) 10px 8px; background: linear-gradient(var(--acento2), rgba(15,61,69,.88)); color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.2); z-index: 5; }
.marca { display: flex; align-items: baseline; gap: 2px; white-space: nowrap; font-size: 18px; }
.marca span { font-size: 13px; opacity: .75; }
.prog { flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,.18); overflow: hidden; margin: 0 8px; min-width: 40px; }
.prog i { display: block; height: 100%; width: 0; background: #ff9b8c; transition: width .4s, background .4s; }
.prog.ok i { background: #7fe0a0; }
.ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; }
.ic:hover { background: rgba(255,255,255,.12); }
#b-lang span { font-weight: 700; font-size: 13px; letter-spacing: .04em; }

.rotulo { position: fixed; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-radius: 12px;
  background: var(--papel); box-shadow: var(--sombra); pointer-events: auto; font-size: 15px; }
.dica { position: fixed; left: 50%; bottom: calc(18px + var(--base)); transform: translateX(-50%); z-index: 3; padding: 8px 14px; border-radius: 20px;
  background: rgba(15,61,69,.82); color: #fff; font-size: 13px; text-align: center; max-width: 92vw; transition: opacity .8s; }
.dica.some { opacity: 0; pointer-events: none; }
.btn { border: 0; border-radius: 10px; padding: 9px 16px; background: var(--acento); color: #fff; font-weight: 600; cursor: pointer; }
.btn.mini { padding: 6px 12px; font-size: 14px; }
.lnk { border: 0; background: none; color: var(--acento); padding: 8px 0; text-align: left; cursor: pointer; font-size: 15px; }

/* gaveta do índice */
.gaveta { position: fixed; top: 0; bottom: 0; left: 0; width: min(380px, 92vw); z-index: 8; display: flex; flex-direction: column;
  background: var(--papel); box-shadow: var(--sombra); transform: translateX(-105%); transition: transform .28s ease; padding-top: var(--topo); }
.gaveta.aberto { transform: none; }
.gaveta-cab { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 18px; border-bottom: 1px solid var(--linha); }
.gaveta-cab h2 { margin: 0; font-size: 19px; }
#lista-modulos { list-style: none; margin: 0; padding: 6px 8px; overflow: auto; flex: 1; }
.item-mod { width: 100%; display: grid; grid-template-columns: 30px 1fr 26px; align-items: center; gap: 8px; padding: 10px 8px; border: 0;
  background: none; border-radius: 10px; text-align: left; cursor: pointer; }
.item-mod:hover, .item-mod.ativo { background: color-mix(in srgb, var(--acento) 10%, transparent); }
.item-mod .num { font-weight: 700; color: var(--acento); text-align: center; }
.item-mod .nome { font-size: 15px; line-height: 1.3; }
.anel-p { width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(var(--cor-anel, var(--acento)) calc(var(--p) * 1%), var(--linha) 0); position: relative; }
.anel-p::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--papel); }
.anel-p.nota { width: 32px; height: 32px; display: grid; place-items: center; }
.anel-p.nota::after { inset: 3px; }
.anel-p.nota b { position: relative; z-index: 1; font-size: 11px; font-weight: 700; letter-spacing: -.02em; color: var(--cor-anel, var(--suave)); }
.anel-p.baixo { --cor-anel: var(--baixo); } .anel-p.ok { --cor-anel: var(--alto); }
.item-mod { grid-template-columns: 30px 1fr 34px; }
.resumo-nota { margin: 8px 14px 2px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--baixo) 9%, transparent); border: 1px solid color-mix(in srgb, var(--baixo) 30%, transparent); }
.resumo-nota.ok { background: color-mix(in srgb, var(--alto) 10%, transparent); border-color: color-mix(in srgb, var(--alto) 35%, transparent); cursor: pointer; }
.rn-l { display: flex; justify-content: space-between; align-items: baseline; }
.rn-l span { font-size: 14px; color: var(--suave); } .rn-l b { font-size: 22px; color: var(--baixo); } .resumo-nota.ok .rn-l b { color: var(--alto); }
.rn-barra { height: 8px; border-radius: 4px; background: var(--linha); overflow: hidden; margin: 6px 0; }
.rn-barra i { display: block; height: 100%; background: var(--baixo); transition: width .4s; } .resumo-nota.ok .rn-barra i { background: var(--alto); }
.resumo-nota p { margin: 0; font-size: 13px; line-height: 1.35; color: var(--suave); }
.nota-parc { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; border: 0; border-radius: 9px; padding: 4px 8px; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff; }
.nota-parc small { font-size: 9px; opacity: .8; text-transform: uppercase; letter-spacing: .04em; }
.nota-parc b { font-size: 16px; color: #ffb3a8; } .nota-parc.ok b { color: #8ff0b0; }
@media (max-width: 420px) { .nota-parc small { display: none; } .marca span { display: none; } }
.gaveta-rodape { display: flex; flex-direction: column; padding: 8px 18px calc(12px + var(--base)); border-top: 1px solid var(--linha); }

/* leitor do módulo */
.leitor { position: fixed; top: 0; right: 0; bottom: 0; width: min(720px, 100vw); z-index: 7; display: flex; flex-direction: column;
  background: var(--papel); box-shadow: var(--sombra); transform: translateX(105%); transition: transform .3s ease; padding-top: var(--topo); }
.leitor.aberto { transform: none; }
.leitor-cab { display: flex; align-items: center; gap: 6px; padding: 8px 8px 4px; }
.leitor-tit { flex: 1; min-width: 0; }
.leitor-tit small { color: var(--acento); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.leitor-tit h1 { margin: 0; font-size: 22px; line-height: 1.2; }
.abas { display: flex; gap: 4px; padding: 6px 12px; border-bottom: 1px solid var(--linha); overflow-x: auto; }
.aba { border: 0; background: none; padding: 8px 12px; border-radius: 20px; cursor: pointer; color: var(--suave); white-space: nowrap; }
.aba.ativo { background: var(--acento); color: #fff; }
.corpo { flex: 1; overflow: auto; padding: 18px 24px calc(40px + var(--base)); font-size: 17px; line-height: 1.65; }
.corpo p { margin: 0 0 1em; }
.corpo h3 { margin: 1.4em 0 .5em; font-size: 19px; }
.corpo ul { padding-left: 1.2em; margin: 0 0 1em; }
.corpo figure { margin: 1.4em 0; text-align: center; }
.corpo .fig { border: 0; padding: 0; background: #fff; border-radius: 12px; cursor: zoom-in; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.corpo .fig { display: block; margin: 0 auto; width: 100%; max-width: 640px; }
.corpo .fig > img { display: block; max-width: 100%; max-height: 420px; }
.figbox { position: relative; container-type: inline-size; width: min(100%, 640px); margin: 0 auto; }
.figbox img { display: block; width: 100%; height: 100%; }
.rot { position: absolute; transform: translateX(-50%); white-space: pre; width: max-content; text-align: center; line-height: 1.12;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #111; pointer-events: none; }
.zoom-fig { width: min(96vw, 1100px); background: #fff; border-radius: 10px; overflow: hidden; }
.zoom-fig .figbox { width: 100%; }
.zoom-fig > img { width: 100%; }
.corpo figcaption, .corpo .leg { font-size: 14px; color: var(--suave); margin-top: 8px; text-align: left; }
.saiba { margin: 1.4em 0; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--acento) 9%, transparent); border-left: 4px solid var(--acento); }
.saiba h4 { margin: 0 0 6px; color: var(--acento); }
.saiba a { display: block; color: var(--acento); word-break: break-all; font-size: 15px; }
.vazio { color: var(--suave); }
.fim { height: 1px; }

.modal, .zoom { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(5,20,25,.55); padding: 16px; }
.modal[hidden], .zoom[hidden] { display: none; }
.modal-caixa { background: var(--papel); border-radius: 16px; padding: 20px 22px; max-width: 520px; width: 100%; box-shadow: var(--sombra); }
.modal-caixa h2 { margin-top: 0; }
.acoes { text-align: right; margin-bottom: 0; }
.zoom { cursor: zoom-out; }

.zoom p { color: #fff; max-width: 720px; text-align: center; }
.carregando { position: fixed; inset: 0; z-index: 30; display: grid; place-content: center; justify-items: center; gap: 12px;
  background: radial-gradient(120% 90% at 50% 40%, var(--fundo1), var(--fundo2)); transition: opacity .6s; color: var(--suave); }
.carregando.some { opacity: 0; pointer-events: none; }
.anel { width: 46px; height: 46px; border-radius: 50%; border: 4px solid var(--linha); border-top-color: var(--acento); animation: gira 1s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (max-width: 600px) {
  .marca span { display: none; }
  .corpo { padding: 14px 16px calc(40px + var(--base)); font-size: 16px; }
  .leitor-tit h1 { font-size: 19px; }
}

.tabela-wrap { overflow-x: auto; margin: 1.4em 0; }
.tabela { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.45; }
.tabela caption { font-weight: 700; text-align: left; padding: 0 0 8px; }
.tabela th, .tabela td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--linha); }
.tabela thead th { background: color-mix(in srgb, var(--acento) 12%, transparent); }
.tabela tbody th { font-weight: 600; white-space: nowrap; }
.tabela tbody tr:nth-child(even) { background: color-mix(in srgb, var(--acento) 4%, transparent); }
@media (max-width: 600px) { .tabela tbody th { white-space: normal; } }

/* atividades */
.at-tit { font-size: 20px; margin: 0 0 .8em; }
.campo { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.rot-campo { font-weight: 700; color: var(--acento); min-width: 1.6em; }
.campo input, .lacuna { flex: 1; font: inherit; padding: 9px 12px; border: 1.5px solid var(--linha); border-radius: 10px; background: var(--papel); color: var(--tinta); min-width: 0; }
.lacuna { flex: none; width: 12em; padding: 4px 8px; }
span.lacuna { display: inline-block; text-align: center; font-weight: 600; }
input.ok, .lacuna.ok { border-color: #2e8b57; background: color-mix(in srgb, #2e8b57 10%, var(--papel)); }
input.erro, .lacuna.erro { border-color: #c0392b; background: color-mix(in srgb, #c0392b 10%, var(--papel)); }
input.mostrado { border-color: var(--acento); }
.at-acoes { display: flex; align-items: center; gap: 14px; margin: 1em 0; flex-wrap: wrap; }
.at-msg.ok, .at-fb .ok { color: #2e8b57; } .at-msg.erro, .at-fb .erro { color: #c0392b; }
.comentarios { padding: 12px 16px; border-radius: 12px; background: color-mix(in srgb, var(--acento) 8%, transparent); }
.comentarios h3 { margin-top: 0; font-size: 17px; }
.at-barra { height: 6px; border-radius: 3px; background: var(--linha); overflow: hidden; margin-top: 4px; }
.at-barra i { display: block; height: 100%; background: var(--acento); transition: width .3s; }
.at-cont { color: var(--suave); font-size: 14px; margin: 6px 0 14px; }
.at-enun { color: var(--suave); margin-bottom: .3em; }
.at-afirm { font-size: 18px; line-height: 1.6; }
.at-vf, .at-opcoes { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.btn.vf { flex: 1; min-width: 120px; padding: 14px; font-size: 17px; }
.btn.vf.v { background: #2e8b57; } .btn.vf.f { background: #c0392b; }
.btn.sec { background: var(--papel); color: var(--tinta); border: 1.5px solid var(--linha); font-weight: 500; }
.btn:disabled { opacity: .55; cursor: default; }
.btn.certa { opacity: 1; outline: 3px solid #2e8b57; } .btn.errada { opacity: 1; outline: 3px solid #c0392b; }
.at-fb { min-height: 60px; }
.at-res { text-align: center; padding: 30px 0; }
.at-nota { font-size: 54px; font-weight: 800; color: var(--acento); margin: 0; }
.at-nota small { font-size: 22px; color: var(--suave); }
.forca { display: flex; flex-wrap: wrap; gap: 6px; font-size: 26px; font-weight: 700; letter-spacing: .05em; }
.forca span { min-width: 1em; border-bottom: 3px solid var(--tinta); text-align: center; }
.forca span.fixo { border-bottom: 0; }
.teclado { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; margin: 12px 0; }
.tecla { padding: 9px 0; border: 1.5px solid var(--linha); border-radius: 8px; background: var(--papel); font-weight: 700; cursor: pointer; }
.tecla.certa { background: #2e8b57; color: #fff; border-color: #2e8b57; } .tecla.errada { background: #c0392b; color: #fff; border-color: #c0392b; }
.tecla:disabled { cursor: default; }
.formula { margin: 1.2em 0; padding: 12px 16px; border-radius: 12px; background: color-mix(in srgb, var(--acento) 6%, transparent); }
.formula .eq { text-align: center; font-size: 18px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.fr { display: inline-flex; flex-direction: column; text-align: center; vertical-align: middle; }
.fr > span:first-child { border-bottom: 1.5px solid currentColor; padding: 0 4px; }
.fr > span:last-child { padding: 0 4px; }

/* conta e formulários */
.modal-caixa { position: relative; max-height: 90vh; overflow: auto; }
.fechar-modal { position: absolute; top: 8px; right: 8px; color: var(--suave); }
.suave { color: var(--suave); }
.form { display: flex; flex-direction: column; gap: 10px; }
.form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--suave); }
.form input, .form textarea { font: inherit; color: var(--tinta); padding: 10px 12px; border: 1.5px solid var(--linha); border-radius: 10px; background: var(--papel); }
.form .chk, .chk { flex-direction: row; align-items: flex-start; gap: 8px; color: var(--tinta); font-size: 14px; }
.chk input { margin-top: 3px; }
.form.linha { flex-direction: row; } .form.linha input { flex: 1; min-width: 0; }
.acoes-f { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.erro-msg { color: #c0392b; min-height: 1em; margin: 0; font-size: 14px; }
.lista-t { list-style: none; padding: 0; margin: 0 0 10px; } .lista-t li { padding: 8px 0; border-bottom: 1px solid var(--linha); }
.lnk.mini { font-size: 13px; padding: 0; } .lnk.perigo { color: #c0392b; } .btn.perigo { background: #c0392b; }
a.btn { display: inline-block; text-decoration: none; }
.codigo { font-family: ui-monospace, Menlo, monospace; font-size: 18px; letter-spacing: .1em; color: var(--acento); }
iframe.doc { width: 100%; height: 70vh; border: 0; }

/* ---------------- Missões ---------------- */
#lista-modulos .sep { margin: 14px 8px 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.missao-item .num { font-size: 13px; }
body.em-missao .barra, body.em-missao #dica, body.em-missao #rotulo { display: none !important; }
.missao { position: fixed; inset: 0; z-index: 8; display: flex; flex-direction: column; background: color-mix(in srgb, var(--fundo1) 94%, transparent); }
.missao.transparente { background: transparent; pointer-events: none; }
.missao.transparente .m-cab, .missao.transparente .m-card, .missao.transparente .m-modal, .missao.transparente .m-aviso { pointer-events: auto; }
.missao.transparente .m-area { display: none; }
.m-cab { display: flex; align-items: center; gap: 10px; padding: calc(8px + var(--topo)) 10px 8px 14px; background: linear-gradient(var(--acento2), rgba(15,61,69,.9)); color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.2); }
.m-tit { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.m-tit small { font-size: 11px; opacity: .7; text-transform: uppercase; letter-spacing: .08em; }
.m-tit b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; }
.m-prog { flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,.18); overflow: hidden; min-width: 40px; }
.m-prog i { display: block; height: 100%; width: 0; background: #7fe0c8; transition: width .5s; }
.m-vidas { font-size: 20px; letter-spacing: 2px; white-space: nowrap; }
.coracao { color: #ff6b6b; transition: color .3s, transform .3s; } .coracao.vazio { color: rgba(255,255,255,.25); transform: scale(.85); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.m-cab .btn.sec { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.3); }
.m-palco { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.m-card { margin: 10px auto 0; width: min(920px, calc(100% - 20px)); background: var(--papel); border-radius: 14px; padding: 12px 16px; box-shadow: var(--sombra); }
.missao.transparente .m-palco { justify-content: flex-end; }
.missao.transparente .m-card { margin: 0 auto calc(12px + var(--base)); }
.m-enunciado { margin: 0 0 6px; font-size: 17px; line-height: 1.45; }
.m-enunciado strong, .m-info strong { color: #d9480f; }
.m-pequeno { margin: 4px 0; font-size: 14px; color: var(--suave); }
.m-levando { margin: 0 0 4px; font-size: 14px; }
.m-ops { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.m-area { flex: 1; min-height: 0; overflow: auto; padding: 12px 10px calc(20px + var(--base)); }
.m-area > * { width: min(920px, 100%); margin-left: auto; margin-right: auto; }
.m-continuar { display: block; margin: 16px auto 4px; min-width: 180px; }
.m-info { background: var(--papel); border-radius: 14px; padding: 18px 20px; box-shadow: var(--sombra); font-size: 17px; }
.m-videos { display: flex; flex-wrap: wrap; gap: 8px; } .m-videos a { text-decoration: none; }
.m-alts { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.alt { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 11px 14px; border: 1.5px solid var(--linha); border-radius: 12px; background: var(--papel); cursor: pointer; font-size: 15.5px; line-height: 1.4; }
.alt:hover:not(:disabled) { border-color: var(--acento); }
.alt .letra { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--linha); font-weight: 700; font-size: 13px; }
.alt.certa { border-color: #2e8b57; background: color-mix(in srgb, #2e8b57 12%, var(--papel)); }
.alt.errada { border-color: #c0392b; background: color-mix(in srgb, #c0392b 10%, var(--papel)); opacity: .8; }
.alt:disabled { cursor: default; }
.m-quiz .fig, .m-fig .fig { display: block; width: 100%; max-width: 900px; margin: 0 auto 8px; background: #fff; border: 0; border-radius: 12px; padding: 0; overflow: hidden; }
.m-quiz .figbox, .m-fig .figbox { position: relative; width: 100%; container-type: inline-size; }
.m-quiz .figbox img, .m-fig .figbox img { display: block; width: 100%; height: auto; }
.m-fig .fig { overflow: visible; }
.espaco { position: absolute; transform: translate(-50%, -50%); min-width: 13%; min-height: 6.5cqw; padding: .4cqw .8cqw; border: 2px dashed var(--acento); border-radius: 8px;
  background: rgba(255,255,255,.82); font-size: clamp(10px, 1.7cqw, 15px); line-height: 1.15; text-align: center; display: grid; place-items: center; color: #1d2a30; cursor: pointer; }
.espaco.cheio { border-style: solid; border-color: #2e8b57; background: #e8f6ee; font-weight: 600; cursor: default; }
.espaco.ajudado { border-color: #b7791f; background: #fff6e0; }
.alvo.sobre { outline: 3px solid var(--acento); outline-offset: 2px; }
.treme { animation: treme .4s; } @keyframes treme { 25% { translate: -5px 0; } 50% { translate: 5px 0; } 75% { translate: -3px 0; } }
.m-banco { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 10px; margin-top: 8px; border-radius: 14px; background: color-mix(in srgb, var(--acento) 7%, var(--papel)); min-height: 56px; }
.chip { border: 1.5px solid var(--acento); border-radius: 999px; padding: 7px 14px; background: var(--papel); cursor: grab; font-size: 15px; touch-action: none; user-select: none; display: inline-flex; align-items: center; gap: 6px; }
.chip.sel { background: var(--acento); color: #fff; } .chip.arrastado { opacity: .35; }
.chip img { height: 26px; }
.fantasma { position: fixed; z-index: 50; pointer-events: none; transform: translate(-50%, -60%) rotate(-3deg); box-shadow: var(--sombra); }
.m-banco.cartas .chip { border-radius: 12px; padding: 4px; } .m-banco.cartas .chip img, .fantasma img { height: 90px; width: 90px; object-fit: contain; }
.m-aviso { position: absolute; left: 50%; bottom: calc(18px + var(--base)); transform: translate(-50%, -20px); opacity: 0; pointer-events: none; z-index: 3; padding: 8px 16px; border-radius: 999px; background: var(--acento2); color: #fff; font-weight: 600; transition: .25s; max-width: 90%; text-align: center; }
.m-aviso.ve { opacity: 1; transform: translate(-50%, 0); } .missao.transparente .m-aviso { bottom: auto; top: 70px; } .m-aviso.ok { background: #2e8b57; } .m-aviso.erro { background: #c0392b; }
.m-menos { position: fixed; top: 54px; right: 70px; z-index: 9; color: #ff6b6b; font-weight: 800; font-size: 26px; opacity: 0; pointer-events: none; }
.m-menos.ve { animation: menos 1s; } @keyframes menos { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(30px); } }
.m-modal { position: absolute; inset: 0; z-index: 10; background: rgba(10,25,30,.45); display: grid; place-items: center; padding: 16px; pointer-events: auto; }
.m-modal-caixa { background: var(--papel); border-radius: 16px; padding: 20px 22px; width: min(640px, 100%); max-height: 90vh; overflow: auto; box-shadow: var(--sombra); }
.m-modal-caixa h2 { margin: 0 0 8px; } .m-modal-caixa h3 { margin: 0 0 6px; }
.m-botoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.m-nota { font-size: 18px; } .m-vidas-intro { color: #e03131; font-size: 18px; }
.m-ajuda { font-size: 14px; color: var(--suave); }
/* bases */
.m-bases { background: var(--papel); border-radius: 14px; padding: 16px; box-shadow: var(--sombra); text-align: center; }
.fita { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 10px 0; flex-wrap: wrap; }
.fita .fr { font-size: 13px; color: var(--suave); min-width: 120px; text-align: right; } .fita .fr:last-child { text-align: left; min-width: 0; }
.m-bases .teclas { justify-content: center; }
.base { width: 40px; height: 46px; border-radius: 8px; display: grid; place-items: center; font: 700 22px/1 ui-monospace, Menlo, monospace; color: #fff; }
.base.vazia { background: transparent; border: 2px dashed var(--linha); } .base.atual { border-color: var(--acento); border-style: solid; }
.b-A { background: #2f9e44; } .b-T { background: #e03131; } .b-U { background: #e8590c; } .b-G { background: #343a40; } .b-C { background: #1c7ed6; }
.btn.base-b { width: 64px; height: 56px; font: 700 24px/1 ui-monospace, Menlo, monospace; }
/* tradução */
.m-trad { background: var(--papel); border-radius: 14px; padding: 16px; box-shadow: var(--sombra); }
.trad-cena { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0; overflow-x: auto; }
.rnam { font: 600 16px/1 ui-monospace, Menlo, monospace; white-space: nowrap; padding: 8px 10px; background: #fff3bf; border-radius: 8px; color: #5c3c00; }
.codon { padding: 3px 4px; margin: 0 1px; border-radius: 4px; } .codon.alvo-c { background: #ffe066; } .codon.lido { background: #8ce99a; }
.sub { padding: 10px 26px; border-radius: 40px; font-weight: 600; font-size: 14px; color: #fff; } .sub.menor { background: #a0522d; } .sub.maior { background: #d2914b; padding: 18px 46px; }
.trnas { display: flex; gap: 8px; } .trna-pos { width: 64px; height: 50px; border-radius: 8px; border: 2px dashed var(--linha); display: grid; place-items: center; font-size: 12px; }
.trna-pos.ok { border: 0; background: #e7f5ff; } .trna-pos .ac { font: 700 13px ui-monospace, Menlo, monospace; } .trna-pos .aa { font-weight: 700; color: #1864ab; }
.peptideo { display: flex; align-items: center; min-height: 34px; } .peptideo .aa { padding: 6px 10px; border-radius: 999px; background: #1864ab; color: #fff; font-weight: 700; font-size: 13px; } .peptideo i { width: 10px; height: 3px; background: #1864ab; }
/* minijogos */
.m-jogo { background: var(--papel); border-radius: 14px; padding: 12px 14px; box-shadow: var(--sombra); }
.placar { font-size: 15px; margin: 4px 0 8px; }
.campo { position: relative; height: min(56vh, 460px); border-radius: 12px; overflow: hidden; background: linear-gradient(#f3faff, #e7f2f8); }
.m-iniciar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; font-size: 18px; padding: 14px 28px; }
.prs .ribo { position: absolute; top: -90px; width: 84px; height: 84px; border: 0; padding: 0; background: none; cursor: pointer; animation: cai linear forwards; }
.prs .ribo img { width: 100%; height: 100%; object-fit: contain; rotate: var(--giro); }
.prs .ribo .prs-img { position: absolute; width: 50%; height: 50%; right: -10%; top: -10%; rotate: 0deg; }
.prs .ribo.feito { filter: drop-shadow(0 0 6px #2e8b57); } .prs .ribo.errado { filter: grayscale(1) opacity(.5); }
@keyframes cai { to { transform: translateY(calc(min(56vh, 460px) + 120px)); } }
.enz .cist, .clat .cist { position: absolute; left: 12%; width: 56%; height: 10%; border-radius: 40px; background: #b2f2bb; border: 2px solid #69db7c; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #2b8a3e; }
.enz .cist.trans, .clat .cist.trans { top: 14%; } .enz .cist.medial, .clat .cist.medial { top: 32%; } .enz .cist.cis, .clat .cist.cis { top: 50%; }
.enz .cist.cis { background: #d3f9d8; border-color: #2f9e44; box-shadow: 0 0 0 4px rgba(47,158,68,.15); }
.enz .reg, .clat .reg { position: absolute; left: 4%; right: 30%; bottom: 3%; height: 12%; border-radius: 30px; background: #ffe8cc; border: 2px solid #ffa94d; display: grid; place-items: center; font-weight: 700; color: #d9480f; font-size: 13px; }
.enz .endo, .clat .endo { position: absolute; right: 4%; top: 22%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: #fff0f6; border: 2px solid #f783ac; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #c2255c; }
.enz-v { position: absolute; width: 58px; height: 58px; border-radius: 50%; border: 2px solid #ffa94d; background: rgba(255,255,255,.85); padding: 6px; cursor: pointer; transition: top 1.4s ease-in-out, left 1.4s ease-in-out, opacity .6s; left: var(--x); translate: -50% -50%; }
.enz-v img { width: 100%; height: 100%; object-fit: contain; }
.enz-v.em-reg { top: 91%; } .enz-v.em-cis { top: 55%; border-color: #2f9e44; } .enz-v.em-medial { top: 37%; } .enz-v.em-trans { top: 19%; } .enz-v.em-saida { top: 30%; left: 86%; opacity: 0; }
.enz-v.fosf { box-shadow: 0 0 0 4px rgba(47,158,68,.35); } .enz-v .p { position: absolute; right: -6px; top: -6px; width: 22px; height: 22px; border-radius: 50%; background: #f59f00; color: #fff; font-size: 12px; display: grid; place-items: center; }
.rec { position: absolute; width: 50px; height: 50px; border: 0; background: none; cursor: pointer; padding: 0; transition: top 1.4s, left 1.4s, opacity 1.4s; animation: pulsa 1.2s infinite; }
.rec img { width: 100%; height: 100%; } .rec.em-endo { left: 82%; top: 30%; } .rec.volta { left: 40%; top: 15%; opacity: 0; animation: none; }
@keyframes pulsa { 50% { scale: 1.12; } }
.clat .pm { position: absolute; left: 0; right: 0; top: 0; height: 6%; background: #d0ebff; border-bottom: 3px solid #74c0fc; font-size: 11px; font-weight: 700; color: #1864ab; display: grid; place-items: center; }
.clat .ves { position: absolute; width: 34px; height: 34px; border-radius: 50%; translate: -50% -50%; background: radial-gradient(#fff 45%, #fab005 47%, #f08c00 70%); box-shadow: 0 0 0 6px rgba(250,176,5,.35); opacity: 0; }
/* associar / sequência / imagens */
.m-assoc .defs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.def { background: var(--papel); border-radius: 12px; padding: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.08); display: flex; flex-direction: column; gap: 6px; }
.def p { margin: 0; font-size: 14px; line-height: 1.35; }
.carta-alvo { height: 110px; border: 2px dashed var(--acento); border-radius: 10px; display: grid; place-items: center; cursor: pointer; background: color-mix(in srgb, var(--acento) 5%, transparent); }
.carta-alvo.cheio { border: 2px solid #2e8b57; background: #fff; } .carta-alvo img { max-height: 104px; max-width: 100%; }
.carta-alvo .num { font-size: 28px; font-weight: 800; color: var(--acento); opacity: .5; }
.m-imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } @media (max-width: 560px) { .m-imgs { grid-template-columns: repeat(2, 1fr); } }
.m-imgs figure { margin: 0; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.08); display: flex; flex-direction: column; }
.m-imgs img { width: 100%; height: 150px; object-fit: contain; background: #fff; }
.m-imgs figcaption { margin: 6px; min-height: 40px; border: 2px dashed var(--acento); border-radius: 8px; display: grid; place-items: center; font-size: 14px; cursor: pointer; color: #1d2a30; }
.m-imgs figcaption.cheio { border-style: solid; border-color: #2e8b57; background: #e8f6ee; font-weight: 600; }
/* tabuleiro */
.m-tab { display: flex; flex-direction: column; gap: 12px; }
.trilha { background: var(--papel); border-radius: 14px; padding: 10px 12px; box-shadow: var(--sombra); }
.trilha .casas { display: flex; align-items: center; gap: 10px; }
.casa { width: 64px; height: 54px; border-radius: 12px; border: 0; font-weight: 800; font-size: 20px; color: #fff; cursor: pointer; }
.t0 .casa { background: #63c9bf; } .t1 .casa { background: #b553b0; } .t2 .casa { background: #d9bf33; }
.casa:disabled { opacity: .45; cursor: default; } .casa.feita { opacity: 1; filter: saturate(.6); } .casa.atual { outline: 3px solid var(--acento2); outline-offset: 2px; animation: pulsa 1.4s infinite; }
.final { margin-left: auto; display: flex; align-items: center; gap: 8px; border: 2px dashed var(--linha); border-radius: 40px; padding: 4px 14px 4px 4px; background: none; cursor: pointer; font-weight: 700; }
.final img { width: 52px; height: 52px; object-fit: contain; } .final.atual { border-color: var(--acento); border-style: solid; animation: pulsa 1.4s infinite; } .final.feita { border-color: #2e8b57; border-style: solid; color: #2e8b57; }
.final:disabled { cursor: default; }
.pistas { margin: 8px 0 0; padding-left: 22px; font-size: 14px; color: var(--suave); }
.m-nome { width: 100%; font: inherit; padding: 10px 12px; border: 1.5px solid var(--linha); border-radius: 10px; margin-top: 8px; background: var(--papel); color: var(--tinta); }
.m-nome.erro { border-color: #c0392b; }
.m-tab-img { display: block; max-height: 160px; margin: 0 auto 8px; }
@media (max-width: 560px) { .m-tit b { max-width: 30vw; font-size: 13px; } .m-enunciado { font-size: 15.5px; } .casa { width: 46px; height: 44px; } .final img { width: 40px; height: 40px; } .base { width: 32px; height: 40px; font-size: 18px; } }
.m-modal[hidden], .missao[hidden], .m-card[hidden] { display: none !important; }
.prs-leg { display: flex; gap: 16px; justify-content: center; } .prs-leg figure { margin: 0; text-align: center; font-size: 13px; } .prs-leg img { width: 90px; height: 90px; object-fit: contain; }
.prs .ribo { width: 104px; height: 104px; }
.m-area > .m-continuar { width: auto; }

/* ---------------- Avaliação final e certificado ---------------- */
.fin-passo { background: var(--papel); border: 1.5px solid var(--linha); border-radius: 14px; padding: 12px 16px; margin: 10px 0; }
.fin-passo h3 { margin: 0 0 6px; font-size: 17px; } .fin-passo.feito { border-color: #2e8b57; } .fin-passo.feito h3 { color: #2e8b57; }
.fin-obs { color: var(--suave); font-size: 14.5px; }
.fin-res { border-radius: 14px; padding: 12px 16px; margin: 12px 0; font-size: 17px; } .fin-res.ok { background: color-mix(in srgb, #2e8b57 12%, var(--papel)); } .fin-res.erro { background: color-mix(in srgb, #c0392b 10%, var(--papel)); }
.fin-faltam { columns: 2; } .fin-faltam li { margin: 2px 0; }
.fin-q { background: var(--papel); border-radius: 14px; padding: 14px 16px; margin: 14px 0; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.fin-q h3 { margin: 0 0 6px; color: var(--acento); }
.fin-enun p { margin: 0 0 8px; } .fin-fonte { font-size: 12.5px; color: var(--suave); }
.fin-fig { background: #fff; border-radius: 10px; padding: 8px; margin: 8px 0; } .graf { width: 100%; height: auto; display: block; max-width: 640px; margin: 0 auto; }
.fin-q .fig { display: block; margin: 8px auto; max-width: 560px; width: 100%; border: 0; padding: 0; background: #fff; border-radius: 10px; cursor: zoom-in; } .fin-q .fig img { width: 100%; display: block; }
.fin-item { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; } .fin-item > span { font-weight: 600; }
.fin-item textarea, .fin-item input { font: inherit; padding: 10px 12px; border: 1.5px solid var(--linha); border-radius: 10px; background: var(--papel); color: var(--tinta); resize: vertical; }
.fin-resp { background: color-mix(in srgb, var(--acento) 7%, var(--papel)); border-radius: 10px; padding: 8px 12px; } .fin-resp p { margin: 4px 0 0; white-space: normal; }
.fin-esp summary { cursor: pointer; color: #2e8b57; font-weight: 600; } .fin-esp p { margin: 6px 0 0; font-size: 14.5px; }
.fin-rub { border: 1.5px solid var(--linha); border-radius: 12px; margin: 10px 0; padding: 8px 12px; } .fin-rub legend { font-weight: 600; padding: 0 4px; }
.fin-rub label { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; cursor: pointer; } .fin-rub small { color: var(--suave); }
.fin-parcial { font-size: 17px; }
.fin-carrega { width: 30px; height: 30px; margin: 20px auto; }
.abas[hidden] { display: none !important; }